javascript - 测试是否加载了所有图像

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

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

该功能将立即评估。这意味着在循环中，如同onload事件一样，将loadArr的每个元素都设置为true。该代码在功能上与以下代码相同:

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