使用jQuery可以检测图片何时加载完毕吗?
您可以使用.load()
事件处理程序,如下所示:
$("#myImg").load(function() {
alert('I loaded!');
}).attr('src', 'myImage.jpg');
在设置事件的监听器之前,一定要先连接它,否则事件可能会在你添加监听器之前就被触发了(例如从缓存中加载)。
如果无法在绑定之前设置src
,请确保检查是否已经加载并自行触发它,例如:
$("#myImg").load(function() {
alert('I loaded!');
}).each(function() {
if(this.complete) $(this).load();
});
使用纯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;
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
});
}
我也一直在研究这个问题,发现这个插件非常有帮助:https://github.com/desandro/imagesloaded
看起来代码很复杂,但是我没有找到其他检查图像加载状态的方法。
$('img').load(function(){
//do something
});
我用以下方式尝试了一下:
$('tag')html().promise().done(function(){
//do something
}) ;
但这不会检查图片是否已加载。只有在代码加载完成后才能触发该事件。否则,您可以检查代码是否已完成,然后触发img加载函数并检查图片是否真正加载完成。因此,我们将两者结合起来使用:
$('tag')html('<img src="'+pic+'" />').promise().done(function(){
$('img').load(function(){
//do something like show fadein etc...
});
}) ;
我认为这可以帮助你一点:
$('img').error(function(){
$(this).attr( src : 'no_img.png');
})
所以,如果它被加载 - 将显示原始图像。否则 - 将显示包含崩溃图像或404 HTTP头的事实的图像。
$("#myImg").live("load", function(){ //跳舞 });"
- Erik Escobedo.load()
方法自 jQuery v1.8 版本起已被弃用。 - SquareCat.load(
替换为.on('load',
,即可在 1.7+ 版本中实现等效功能。 - Nick Craver$("#myImg").on('load',
,但现在在Google Chrome中,我必须在$(document).on('ready',
内调用它才能每次正确触发。我还在图像源上放置了一个动态查询字符串,以使其更可靠。它似乎有点出问题。<img src="pic.jpg?<?php echo time(); ?>">
- Ben Sinclair