我知道jQuery中有一个load()
事件,当图像完成加载时触发。但是如果事件处理程序在图像加载完成后再附加怎么办?
是否有像$('#myimage').isLoaded()
这样的属性可以检查图像是否已经加载?
我知道jQuery中有一个load()
事件,当图像完成加载时触发。但是如果事件处理程序在图像加载完成后再附加怎么办?
是否有像$('#myimage').isLoaded()
这样的属性可以检查图像是否已经加载?
complete
属性。
是否有类似
$('#myimage').isLoaded()
这样的属性来检查图片是否已经加载?
没有,但你可以自己实现 :)
jQuery.fn.isLoaded = function() {
return this
.filter("img")
.filter(function() { return this.complete; }).length > 0;
};
true
,如果集合中的所有图像都已加载,则会生成false
,如果其中一个或多个图像未加载。您可以根据需要进行调整。只用纯JS就可以了。图片对象有完整的属性。 在这里查看:http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_complete
这有点像黑客行为,我不确定它是否在任何地方都能起作用。请自行测试。
$.fn.isLoaded = function(message) {
var $this = $(this);
if($this.height() > 0 && $this.width() > 0){
return true;
}
return false;
};
$('#myimage').isLoaded()
编辑:
这在火狐和谷歌浏览器中有效。
$.fn.isLoaded = function(message) {
var $this = $(this);
$this.hide(); // becaues firefox gives a 24*24 dimension
var w = this[0].width;
var h = this[0].height;
$this.show();
if(w > 0 || h > 0){
return true;
}
return false;
};
console.log($('#myimage').isLoaded());
但是如果您隐藏图像,IE会将其宽度和高度设置为0,因此在IE上失败。对于IE,您不应该隐藏图像。
我希望有人可以结合这两个功能来制作一个跨浏览器的东西,或者至少它肯定会帮助某些人。
this[0].height
和 this[0].width
(如果图像已加载,则设置为图像尺寸)。 - Esailija