加载dom中的所有图像后的jquery回调？答案

【问题标题】：jquery callback after all images in dom are loaded?加载dom中的所有图像后的jquery回调？
【发布时间】：2011-06-18 23:27:57
【问题描述】：

如何在加载 DOM 中的所有图像时触发事件？我用谷歌搜索了很多。我找到了这个，但它似乎不起作用：

jQuery event for images loaded

【问题讨论】：

jQuery event for images loaded的可能重复

标签： jquery image load

【解决方案1】：

对window 使用load()^(docs) 方法。

$(window).load(function() {
    // this will fire after the entire page is loaded, including images
});

注意：在较新的 jQuery 版本上使用 $(window).on('load', function(){ ...});

或者直接通过window.onload 进行操作。

window.onload = function() {
    // this will fire after the entire page is loaded, including images
};

如果您想为每张图片触发一个单独的事件，请在每张图片上放置一个.load()。

$(function() {
    $('img').one('load',function() {
        // fire when image loads
    });
});

或者，如果有可能缓存图像，请执行以下操作：

$(function() {
    function imageLoaded() {
       // function to invoke for loaded image
    }
    $('img').each(function() {
        if( this.complete ) {
            imageLoaded.call( this );
        } else {
            $(this).one('load', imageLoaded);
        }
    });
});

编辑：

为了在最后一张图片加载后执行一些操作，使用一个设置为图片总数的计数器，并在每次调用加载处理程序时递减。

当它到达0 时，运行一些其他代码。

$(function() {
    function imageLoaded() {
       // function to invoke for loaded image
       // decrement the counter
       counter--; 
       if( counter === 0 ) {
           // counter is 0 which means the last
           //    one loaded, so do something else
       }
    }
    var images = $('img');
    var counter = images.length;  // initialize the counter

    images.each(function() {
        if( this.complete ) {
            imageLoaded.call( this );
        } else {
            $(this).one('load', imageLoaded);
        }
    });
});

【讨论】：

这不是我真正需要的...我会突然触发我的 js，我只需要等到图像加载后显示它们并触发其他事件...
@Dee：我不明白你的意思。您是说要在每个图像完成加载时为其触发一个单独的处理程序吗？如果是这样，请参阅我的更新。
@Dee：如果上面的解决方案没有达到您想要的效果，那么您需要更详细地解释。我只能说你想在所有图像加载后触发一个事件。这就是我答案顶部的解决方案所做的。如果这还不够，请描述你真正想要的。
@patrick-dw 这是一个很棒的解决方案。请问您如何检测加载最后一个图像的时间，我的意思是使用您的解决方案是否可以检测到最后加载的图像？例如，加载器一直显示，直到最后一个图像加载到容器中。
提醒一下，load 事件似乎并没有让 DOM 冒泡。为了让它对我有用，我必须将事件直接附加到图像上。因此，不要使用$parent.on('load', 'img', doSmthg) 来捕获$parent 下的所有图像，使用事件传播。

【解决方案2】：

下面是我想出的，使用 deferred 对象和$.when 而不是使用计数器。

var deferreds = [];
$('img').each(function() {
    if (!this.complete) {
        var deferred = $.Deferred();
        $(this).one('load', deferred.resolve);
        deferreds.push(deferred);
    }
});
$.when.apply($, deferreds).done(function() {
    /* things to do when all images loaded */
});

如果有任何警告，请告诉我。

【讨论】：

【解决方案3】：

我在使用 user113716 的编辑解决方案时遇到的一个问题是，损坏的图像会使计数器永远不会达到 0。这为我解决了这个问题。

.error(function(){
  imageLoaded();
  $(this).hide();
});

【讨论】：

我必须使用images.error 才能完成这项工作，但现在它似乎运作良好。谢谢！