测试是否加载了所有图像

Test if all images are loaded

本文关键字：图像 是否 加载 测试      更新时间：2023-09-26

下面是我尝试测试是否所有图像都已加载的能力:

for (var i = 0; i < imgCount; i ++) {
    loadArr[i] = false
    imgArr[i] = new Image()
    imgArr[i].src='img'+i+'.png'
    imgArr[i].onload = function() {
        loadArr[i] = true //but wait! At the end of
                          //the loop, i is imgCount
                          //so this doesn't work.
    }
}

问题是，一旦循环完成，变量i是imgCount。这意味着所有其他的"加载"标志永远不会被设置为true时，他们的图像加载。

是否有一些方法来添加"加载"属性到图像，或者有一些解决这个问题的方法?

您需要使用闭包定义onload函数:

for (var i = 0; i < imgCount; i ++) {
    loadArr[i] = false
    imgArr[i] = new Image()
    imgArr[i].src='img'+i+'.png'
    imgArr[i].onload = (function(i){
        return function(){ loadArr[i] = true }
    })(i);
}

下面是一个jsFiddle，它在一个类似的场景中演示了这一点。

另外，请注意您当前选择的作为答案的解决方案实际上不起作用:

imgArr[i].onload = (function() {
        loadArr[i] = true;
    })();

该函数立即求值。这意味着在循环中，loadArr的每个元素都被设置为true，就像onload事件一样。该代码在功能上与:

相同
imgArr[i].onload = loadArr[i] = true;

您必须像这样将索引值传递给匿名函数，

for (var i = 0; i < imgCount; i++) {
    loadArr[i] = false
    imgArr[i] = new Image()
    imgArr[i].src = 'img' + i + '.png'
    imgArr[i].onload = function (index) {
        return function () {
            loadArr[index] = true //but wait! At the end of
            //the loop, i is imgCount
            //so this doesn't work.
        };
    }(i);
}

这就是为什么要使用闭包!您的循环几乎立即运行，并且在加载第一个图像之前很久就结束了。所以i==imgCount，"跳过"所有其他值。闭包可以避免这种情况，并将i的每个值影响为不同的图像。

然而，在你的情况下，我确实会为每个图像添加一个"loaded"属性。

// Construct your image array
for (var i = 0; i < imgCount; i++) {
    imgArr[i] = new Image();
    imgArr[i].src='img'+i+'.png';
}
//Then iterate over the array, adding a 'loaded' attribute when it occurs
imgArr.each(function(){
    $(this).onload(function() {
        $(this).attr('loaded','true');
    });
}
相关文章：