JS批量加载图片是否完成

项目中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>"+item.ITEM_NAME+"</p><div class='portfolio-links'>";
			_HTML_ += " <a href='"+item.ITEM_URL +"' data-gall='portfolioGallery'";
			_HTML_ += " class='venobox' title="+item.ITEM_TITLE+"><i class='icofont-look'></i></a></div></div></div>";
			_HTML_ += ' <div class="py-3"><p class="text-muted text-sm mb-1" align="center"><a class="text-dark"'
			_HTML_ += " href='javascript:void(0)'>" +item.ITEM_TITLE+ "</a></p></div></div>";
	});
	_HTML_ += ' </div>';
	$('#portfolio-container-parent').html(_HTML_);
	if (_TYPE_ == undefined || _TYPE_ == null || _TYPE_ == 'INIT') {
		return ;
	}
	// JS异步构造数据后, 需要加载对应的第三方插件, 类似main.js中也是如此处理
	initiateThirdpartyJsPlugValidate();
}

/**
 * main.js 中通过 $(window).on('load', function() {}) 加载的第三方插件 Initiate venobox 和 Initiate Porfolio isotope and filter。
 * 菜单点击后, 加载Initiate Porfolio isotope and filter前需要验证DOM, IMG, 样式等是否全部加载完成
 */
function initiateThirdpartyJsPlugValidate(){
	var imgLoadLength = 0;
	// 防止其它第三方验证时间过程或者验证失败, 导致查看大图出问题。
	// venobox 就是图片上的查看大图的插件效果, 影响功能使用, 尽量先加载
	// 而Initiate Porfolio isotope and filter 只是控制图片显示好看一些, 加载耗时长 且 网络不好的情况可能会失败
	// Initiate venobox 加载
	$('.venobox').venobox({
	  'share': false
	});
	// Initiate Porfolio isotope and filter 验证
	$('.portfolio-container .portfolio-item img').each(function() {
		$(this).on('load',function(){
			imgLoadLength++;
			if(imgLoadLength == $('.portfolio-container .portfolio-item img').length){
				initiateThirdpartyJsPlug();
			}
		})
	});
}

/**
 * Initiate Porfolio isotope and filter
 */
function initiateThirdpartyJsPlug(){
	var portfolioIsotope = $('.portfolio-container').isotope({
		itemSelector: '.portfolio-item'
	});
}

核心思路：基于img的.on('load',function(){}）判断是否加载完成，已测试过我的阿里云ECS实例1M宽带下加载数十张大图片，加载耗时近两分钟，也可以在图片都加载完成后调用第三方插件。

以上代码仅供参考，如有不当之处，欢迎指出！！！

更多干货，欢迎大家关注和联系我。期待和大家一起更好的交流、探讨技术！！！