Question

我试图测试是否所有图像都已加载：

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。

是否有某种方法可以为图片添加“已加载”属性，或者是否有解决此问题的方法？

Answer 1

您需要使用闭包来定义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;

Answer 2

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

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);
}

Answer 3

这就是关闭的原因！您的循环几乎立即运行，并且在加载第一个图像之前很久就会结束。所以我马上== imgCount，“跳过”所有其他值。闭包可以避免这种情况，并将i的每个值影响到不同的图像。

但是在你的情况下，我确实会为每个图像添加一个“已加载”属性。

// 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');
    });
}

测试是否已加载所有图像

3 个答案: