jq监听图片加载结束

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('图片加载结束')
});

猜你喜欢

转载自blog.csdn.net/qq_37235823/article/details/88645683