jQuery 检测图像负载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3537469/
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
Detect image load
提问by Pablo
Is it possible to detect once an image has been loaded with jQuery?
是否可以在使用 jQuery 加载图像后进行检测？
回答by Nick Craver
You can use the .load()event handler, like this:
您可以使用.load()事件处理程序，如下所示：
$("#myImg").load(function() {
alert('I loaded!');
}).attr('src', 'myImage.jpg');
Be sure to attach it beforesetting the source, or the event may have fired before you attached a handler to listen for it (e.g. loading from cache).
确保在设置源之前附加它，否则事件可能在您附加处理程序以侦听它之前已经触发（例如从缓存加载）。
If that's notdoable (setting the srcafter binding), be sure to check if it's loaded and fire it yourself, like this:
如果这是不是可行的（设置src绑定后），一定要自己检查，如果它的加载和火，就像这样：
$("#myImg").load(function() {
alert('I loaded!');
}).each(function() {
if(this.complete) $(this).load();
});
回答by Peter Ajtai
It's just as simple to use plain Javascript:
使用普通的 Javascript 也很简单：
// Create new image
var img = new Image();
// Create var for image source
var imageSrc = "http://example.com/blah.jpg";
// define what happens once the image is loaded.
img.onload = function() {
// Stuff to do after image load ( jQuery and all that )
// Within here you can make use of src=imageSrc,
// knowing that it's been loaded.
};
// Attach the source last.
// The onload function will now trigger once it's loaded.
img.src = imageSrc;
回答by vsync
I've been also researching this for long time, and have found this plugin to wonderfully help with this: https://github.com/desandro/imagesloaded
我也一直在研究这个很长时间，并发现这个插件可以很好地帮助解决这个问题：https: //github.com/desandro/imagesloaded
It seems like an aweful lot of code, but...I found no other way for checking when an image has been loaded.
这似乎是一大堆代码，但是......我没有找到其他方法来检查图像何时加载。
回答by jroi_web
Using jQuery on('load') function is the right way to check if the image is loaded. But be aware that the on('load') function will not work if the image is already in cache.
使用 jQuery on('load') 函数是检查图像是否已加载的正确方法。但请注意，如果图像已在缓存中，则 on('load') 函数将不起作用。
var myImage = $('#image_id');
//check if the image is already on cache
if(myImage.prop('complete')){
//codes here
}else{
/* Call the codes/function after the image is loaded */
myImage.on('load',function(){
//codes here
});
}
回答by Swen
It's easy with jquery:
使用 jquery 很容易：
$('img').load(function(){
//do something
});
If tried it with:
如果尝试过：
$('tag')html().promise().done(function(){
//do something
}) ;
but that will not check if the picture is load. That fire done if the code is load. Otherwise you can check if code was done then fire the img load function and check if picture is really loaded. So we do a combination of both:
但这不会检查图片是否已加载。如果代码加载完成，那火就完成了。否则，您可以检查代码是否已完成，然后触发 img 加载功能并检查图片是否真的已加载。所以我们将两者结合起来：
$('tag')html('<img src="'+pic+'" />').promise().done(function(){
$('img').load(function(){
//do something like show fadein etc...
});
}) ;
回答by Roman Kozin
I think this can help you a bit:
我认为这可以帮助你一点：
$('img').error(function(){
$(this).attr( src : 'no_img.png');
})
So, if it loaded - will be shown original image. In other - will be shown image, that contains fact with crashed image or 404 HTTP Header.
因此，如果加载 - 将显示原始图像。在其他 - 将显示图像，其中包含图像崩溃或 404 HTTP 标头的事实。
