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

Posted 2023-03-15

【中文标题】加载dom中的所有图像后的jquery回调？

【英文标题】：jquery callback after all images in dom are loaded?

【发布时间】：2011-06-18 23:27:57

【问题描述】：

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

jQuery event for images loaded

【问题讨论】：

jQuery event for images loaded的可能重复

【参考方案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 才能完成这项工作，但现在它似乎运作良好。谢谢！