jQuery 或 JavaScript：确定图像何时完成加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4494437/
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 or JavaScript: Determine when image finished loading
提问by Francisc
How can I detect when an image has finished loading be it from the server or the browser cache?
I want to load various images in the same <img/>tag and detect when the loading of a new images has finished.
如何检测图像何时从服务器或浏览器缓存加载完成？我想在同一个<img/>标签中加载各种图像并检测新图像的加载何时完成。
Thank you.
谢谢你。
回答by Matthew
$('img').on('load', function() {
// do whatever you want
});
回答by Pikrass
The onloaddocument's event will fire only after all the elements, images included, have fully loaded.
该onload文件的事件将触发只有在所有的元素，包括图像，已满载。
The onload<img>'s event will fire after the single image have fully loaded.
所述onload<IMG>的事件将触发单个图像已经完全加载后。
So you can attach a listener to these events, using jQuery objects or DOM's addEventListener (and IE's attachEvent)
因此，您可以使用 jQuery 对象或 DOM 的 addEventListener（以及 IE 的 attachEvent）为这些事件附加一个侦听器
回答by bardu
Well, this is quite an old thread I came across yesterday. I'm using backbone.js and require.js and resizing my layout always caused problems with views that contain images.
嗯，这是我昨天遇到的一个很老的话题。我正在使用backbone.js 和require.js 并且调整我的布局大小总是会导致包含图像的视图出现问题。
So, I needed a way to know when the last image has finished loading to resize the layout. All, mentioned solutions above didn't work in my case. After some hours of more investigation I found the ultimate solution that is working:
所以，我需要一种方法来知道最后一个图像何时完成加载以调整布局大小。上面提到的所有解决方案在我的情况下都不起作用。经过几个小时的更多调查，我找到了有效的最终解决方案：
http://desandro.github.com/imagesloaded/
http://desandro.github.com/imagesloaded/
Hope that helps others as well.
希望对其他人也有帮助。
回答by Henrik
I think this looks a bit cleaner
我觉得这看起来更干净
$('img').load(function() {
// Your img has finished loading!
});
回答by bejonbee
For a more thorough image load detection, including images loaded from cache, try this: https://github.com/paulirish/jquery.imgloaded
要进行更彻底的图像加载检测，包括从缓存加载的图像，请尝试以下操作：https: //github.com/paulirish/jquery.imgloaded
回答by cwd
From a very similar question Official way to ask jQuery wait for all images to load before executing somethingand just like Pikrass says:
从一个非常相似的问题官方方式来询问 jQuery 在执行某些操作之前等待所有图像加载，就像 Pikrass 说的：
With jQuery, you use
$(document).ready()to execute something when the DOMis loaded and$(window).load()to execute something when all other things are loaded as well, such as the images.
使用 jQuery，您可以
$(document).ready()在加载DOM时执行某些内容，并在加载$(window).load()所有其他内容（例如图像）时执行某些内容。
Here are two examples:
这里有两个例子：
DOM
DOM
jQuery(document).ready(function(){
console.log('DOM ready');
});
Images / Everything Else
图片 / 其他
jQuery(window).load(function(){
console.log('all other things ready');
});
You should be able to confirm in your console:
您应该能够在控制台中确认：
screenshot-with-shadow.png http://img547.imageshack.us/img547/9681/yih.png
screenshot-with-shadow.png http://img547.imageshack.us/img547/9681/yih.png
回答by Tom Sarduy
Everyone mentioned that the event should be fired before set to the src.
每个人都提到应该在设置为 src 之前触发事件。
But if you don't want to worry about it, you can use the oncompleteevent (will be fired even with cached images) to fire onload, like this:
但是如果您不想担心，您可以使用该oncomplete事件（即使使用缓存图像也会被触发）来触发onload，如下所示：
$("img").one("load", function() {
// do stuff
}).each(function() {
if(this.complete) $(this).load();
});
Using jQuery you don't have to worry about backward compatibility (eg: img.height>0in IE)
使用 jQuery，您不必担心向后兼容性（例如：img.height>0in IE）
