Question

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

我尝试了这个，但它不起作用：

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

我得到了

33：Uncaught TypeError：Object [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/

要使其正常工作，必须在设置onload属性之前分配.src处理函数，因为如果图像在浏览器缓存中，onload可能会在.onload之前立即触发被分配，因此错过了事件。

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

1 个答案: