检查是否在jQuery（或纯JavaScript）中加载了图像

Question

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

是否有像$('#myimage').isLoaded()这样的属性来检查图像是否已加载？

Answer 1

您可以查看图片的complete属性。

  

是否有像$('#myimage').isLoaded()这样的属性来检查图像是否已加载？

不，但你可以这样做：）

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

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

Answer 2

普通JS足够了。图像对象具有完整的属性。 请在此处查看：http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_complete

Answer 3

它有点hackish，我不确定它会无处不在。 自己做测试。

$.fn.isLoaded = function(message) {
  var $this = $(this);
  if($this.height() > 0 && $this.width() > 0){
     return true;
  }
  return false;
};

$('#myimage').isLoaded()

修改

这适用于ff和chrome，

$.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());

但是如果你隐藏图像，即给出0作为宽度和高度，那么它就失败了。因为，你不应该隐藏图像。

我希望，有人可以将这些功能结合起来制作一个跨浏览器的东西，或者至少它会帮助某人肯定。