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

Question

我有一个图像数组(图像的确切数量不同),当它们全部加载时我想要一些代码来执行.

我试过这个,但它不起作用:

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

我明白了

33:未捕获的TypeError:对象[对象对象],[对象对象],[对象对象],[对象对象]没有方法'加载'

我不认为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/

为此,onload必须在设置.src属性之前分配处理函数,因为如果图像在浏览器缓存中,onload可能会在.onload分配之前立即触发,从而错过事件.