javascript - 检查图像是否以 jQuery（或纯 JavaScript）加载

Question

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

是否有类似$('#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

它有点骇人听闻，我不确定它是否会在任何地方都有效。自己做测试。

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

但是如果你隐藏图像 ie 给 0 作为宽度和高度，所以它会失败 ie。即，您不应该隐藏图像。

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