在jQuery(或纯JavaScript)中检查图像是否已加载

4

我知道jQuery中有一个load()事件,当图像完成加载时触发。但是如果事件处理程序在图像加载完成后再附加怎么办?

是否有像$('#myimage').isLoaded()这样的属性可以检查图像是否已经加载?


我认为这正是你所需要的:https://dev59.com/YXM_5IYBdhLWcg3wt1rD#1257418 - Adil Shaikh
3个回答

10
你可以检查图片的complete属性。

是否有类似$('#myimage').isLoaded()这样的属性来检查图片是否已经加载?

没有,但你可以自己实现 :)

jQuery.fn.isLoaded = function() {
    return this
             .filter("img")
             .filter(function() { return this.complete; }).length > 0;
};

这会生成true,如果集合中的所有图像都已加载,则会生成false,如果其中一个或多个图像未加载。您可以根据需要进行调整。

“.complete” 实际上得到了广泛的支持。它已经在 HTML5 中标准化,但在此之前很长一段时间就得到了支持(甚至包括 IE6)。 - jfriend00

2

1

这有点像黑客行为,我不确定它是否在任何地方都能起作用。请自行测试。

$.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].heightthis[0].width(如果图像已加载,则设置为图像尺寸)。 - Esailija
很奇怪,但在Firefox上它给出了24x24的尺寸。在Chrome中运行良好。我猜24*24是当没有图像时显示的图像大小。 - Jashwant
2
真的,这两个解决方案都相当糟糕。 - Esailija

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接