JS批量加载图片是否完成

饶艳辉

于 2020-08-16 18:37:10 发布

阅读量721

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术栈文章标签：图片加载完毕如何判断图片加载完毕

本文链接：https://blog.youkuaiyun.com/raoyanhui_java/article/details/108040408

项目中JS异步加载图片，且需要在图片全部加载完成后调用第三方插件对图片进行自动排版

难点在于，如何判断异步加载的图片都加载完成？废话不多说，直接上代码，如下：

/**
 * 菜单点击后, 数据区显示
 * @param {Object} _TYPE_
 * @param {Object} _KEY_
 */
function loadPortfolioItem(_TYPE_, _KEY_) {
	// <!-- <p></p> 调整子菜单导航栏和搜索后高度不一致问题。没有实际意义-->
	var _HTML_ = '<p></p><div class="row portfolio-container">';
	var ITEM_DATA = PORTFOLIO_ITEM_DATA[_KEY_];
	ITEM_DATA.forEach(function(item, index){
		_HTML_ += ' <div class="col-xl-4 col-sm-6 portfolio-item"><div class="portfolio-wrap">';
			_HTML_ += "<img src='"+item.ITEM_URL+"' class='img-fluid' alt='' />";
			_HTML_ += " <div class='portfolio-info'><h4>"+item.ITEM_TITLE+"</h4><p>"&