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

Question

那么，如果您可以使用 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();
}

演示