jQuery 加载dom中的所有图像后jquery回调？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4857896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery callback after all images in dom are loaded?
提问by Dee
How can I fire an event when all images in the DOM are loaded? I've googled a lot. I've found this, but it doesn't seem to work:
加载 DOM 中的所有图像时如何触发事件？我用谷歌搜索了很多。我发现了这个，但它似乎不起作用：
回答by user113716
Use the load()(docs)method against the window.
使用load()（文档）对方法window。
$(window).load(function() {
// this will fire after the entire page is loaded, including images
});
Or just do it directly via window.onload.
或者直接通过window.onload.
window.onload = function() {
// this will fire after the entire page is loaded, including images
};
If you want a separate event to fire for each image, place a .load()on each image.
如果您希望为每个图像触发单独的事件，请在每个图像上放置一个.load()。
$(function() {
$('img').one('load',function() {
// fire when image loads
});
});
Or if there's a chance an image may be cached, do this:
或者，如果有可能缓存图像，请执行以下操作：
$(function() {
function imageLoaded() {
// function to invoke for loaded image
}
$('img').each(function() {
if( this.complete ) {
imageLoaded.call( this );
} else {
$(this).one('load', imageLoaded);
}
});
});
EDIT:
编辑：
In order to perform some action after the last image loads, use a counter set at the total number of images, and decrement each time a load handler is called.
为了在最后一个图像加载后执行某些操作，请使用设置为图像总数的计数器，并在每次调用加载处理程序时递减。
When it reaches 0, run some other code.
当它到达时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);
}
});
});
回答by holmis83
Below is what I came up with, using deferredobjects and $.wheninstead of using a counter.
下面是我想出的，使用延迟对象而$.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 */
});
Let me know if there is any caveats.
让我知道是否有任何警告。
回答by jel
One issue I ran into with user113716's edited solution is that a broken image will keep the counter from ever reaching 0. This fixed it for me.
我在使用 user113716 的已编辑解决方案时遇到的一个问题是，损坏的图像会使计数器永远不会达到 0。这为我解决了这个问题。
.error(function(){
imageLoaded();
$(this).hide();
});
