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

【问题标题】：jQuery: How to check when all images in an array are loaded?jQuery：如何检查数组中的所有图像何时加载？
【发布时间】：2011-09-16 06:59:50
【问题描述】：

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

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

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

我明白了

33: Uncaught TypeError: Object [object Object],[object Object],[object Object],[object Object] has no method 'load'

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

【问题讨论】：

我想知道你是如何构造这个数组的。它包含什么？
@robert 基本上我会在某个 div 中查找所有元素并将它们推送到一个数组中。
你为什么不用 jQuery：$('#divId img') ?

标签： javascript jquery image load onload

【解决方案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 之前立即触发，因此缺少事件。

【讨论】：