jq异步监听页面图片加载结束
1、定义:
// 参数:如要监听的doc数据
function imgLoad(data) {
return new Promise(function (res, err) {
var imgData = data?data:$('img'); // 图片数据
var img = [],
flag = 0, // 成功加载的图片数量
imgTotal = imgData.length, // 图片总数量
mulitImg = []; // 商品图片路径
// 循环等待页面里的所有图片都加载完成后再处理
for (var i = 0; i < imgTotal; i++) {
mulitImg.push(imgData.eq(i).attr('src'));
img[i] = new Image();
img[i].src = mulitImg[i];
img[i].onload = function () {
// 单张图片加载成功
flag++;
if (flag == imgTotal) {
//全部加载完成
res(200)
}
};
var imgErrNum = 0; // 图片加载失败记录
img[i].onerror = function (err) {
// 单张图片加载失败
imgTotal--;
if (flag == (imgTotal - imgErrNum)) {
//全部加载完成
res(200)
}
};
}
})
}
2、调用:
var doc = $('img'); // 图片doc数据
imgLoad(doc).then(function (value) {
console.log('图片加载结束')
});