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

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

这就是关闭的原因！您的循环几乎立即运行，并且在加载第一张图像之前很久就结束了。所以 i==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');
    });
}