Question

那么，如果可以determine when an image has finished loading with jQuery，多个图像是否完全相同？

Answer 1

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

在调用每个图片的.load()回调时，resolve关联的延迟对象，然后仅在所有承诺时使用$.when()调用最终回调已经解决：

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回调。这超出了这个答案的范围。

Answer 2

您可以轻松完成：

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

确定一组图像何时加载完jQuery？

2 个答案: