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