JS批量加载图片是否完成

原创

于 2020-08-16 18:37:10 发布 · 721 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图片加载完毕 #如何判断图片加载完毕

项目中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>"&