使用 jQuery 确定一组图像何时完成加载？答案

【问题标题】：Determine when a set of images has finished loading with jQuery?使用 jQuery 确定一组图像何时完成加载？
【发布时间】：2012-09-25 17:52:46
【问题描述】：

那么，如果可以determine when an image has finished loading with jQuery，多张图片是不是一模一样？

【问题讨论】：

如果你在这种情况下使用 $('img').load(/*FN*/) 你 /*FN*/ 将为每个 img 执行，而不是一次。能否详细说明您需要什么？

标签： jquery image loading

【解决方案1】：

你可以轻松做到：

function onloadall(images, callback) {
    var n = 0;
    for (var i=0; i<images.length; i++) {
        if (!images[i].width) {
            n++;
            images[i].onload = function(){
               if (--n==0) callback();
            }
        }
    }
    if (n==0) callback();
}

demo

【讨论】：

【解决方案2】：

为每个正在加载的图像创建一个Deferred 对象，并将它们存储在一个数组中。

由于每个图像的.load() 回调被调用，resolve 关联的延迟对象然后使用$.when() 调用最终回调仅当所有的承诺都已解决： p>

function onAllLoaded(imgs, callback) {
    var i, n, a = [];
    for (i = 0, n = imgs.length; i < n; ++i) {
        a[i] = $.Deferred();
        $(imgs[i]).on('load', a[i].resolve); // not using .onload to avoid clashes
    }
    $.when($, a).done(callback);
}

请注意，在某些浏览器（早期的 IE？）上，您需要采取特殊措施来确保 .load 回调确实发生。这超出了这个答案的范围。

【讨论】：