jquerycallback所有图像在dom后加载？

当DOM中的所有图像都被加载后，如何激发事件？ 我search了很多。 我发现这个，但似乎没有工作：

加载图片的jQuery事件

Answer 1

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

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

或者直接通过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 }); }); 

或者如果可能会caching图像，请执行以下操作：

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

---

编辑：

为了在最后一次加载图像后执行某些操作，请使用设置为图像总数的计数器，并在每次调用装入处理程序时减less计数。

当它达到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); } }); }); 

Answer 2

我遇到的user113716的编辑解决scheme的一个问题是，一个破碎的图像将保持计数器从未达到0.这就为我解决了。

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

Answer 3

下面是我想到的，使用延迟对象和$.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 */ }); 

让我知道是否有任何警告。