检查图像是否以 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

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

$.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。例如，你不应该隐藏图像。

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