jQuery：如何检查数组中的所有图像何时加载？

Question

我有一个图像数组（图像的确切数量各不相同），当它们全部加载时，我想要执行一些代码。

我尝试过，但它不起作用：

myImgArray.load(function(){
    alert('loaded');
});

我明白了

33：未捕获类型错误：对象 [object Object]、[object Object]、[object Object]、[object Object] 没有方法“load”

我不认为for循环或类似的东西会起作用，因为图像可能，并且可能会以“随机”顺序加载。

Answer 1

我知道的唯一方法是为每个图像附加一个加载处理程序，并记录已加载的图像数量。当您达到总数时，它们就全部加载完毕。

下面是执行此操作的代码：

var urls = [
    "http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg",
    "http://photos.smugmug.com/photos/344292111_SvSfK-Ti.jpg",
    "http://photos.smugmug.com/photos/344291168_nErcq-Ti.jpg"
];

var imgs = [];
var cnt = 0;

for (var i = 0; i < urls.length; i++) {
    var img = new Image();
    img.onload = function() {
        ++cnt;
        if (cnt >= urls.length) {
            // all images loaded here
        } else {
            // still more images to load
        }
    };
    img.src = urls[i];
    imgs.push(img);
}

您可以在此处查看它的实际操作：http://jsfiddle.net/jfriend00/7KF7V/

对于要实现此功能，必须在设置 .src 属性之前分配 onload 处理函数，因为如果图像位于浏览器缓存中，onload 可能会在之前立即触发.onload 已分配，因此错过了该事件。