jQuery或Javascript检查图像是否已加载

Question

我知道Stackoverflow上有很多这些,但我没有找到一个适用于我最近版本的jquery(1.10.2).

我试过了:

$(".lazy").load(function (){}

但我相信经过一些研究.load用于检测图像负载在jQuery 1.8中已被弃用.我需要做的是在加载图像后激活图像调整大小功能.我无法控制HTML,目前我必须通过.attr()在页面加载后附加属性(via )来添加图像尺寸,以便我可以使用lazyload js.

问题是我需要一种准确的方法来阻止我的各种脚本,直到图像正确加载,否则函数有时会在每个图像加载之前触发.我尝试过使用$(window).load(function (){});它有时在每个图像加载之前仍然会触发.

Answer 1

我经常这样做:

var image = new Image();
image.onload = function () {
   console.info("Image loaded !");
   //do something...
}
image.onerror = function () {
   console.error("Cannot load image");
   //do something else...
}
image.src = "/images/blah/foo.jpg";

请记住,加载是异步的,因此您必须在onload和onerror事件中继续执行脚本.

Answer 2

还有一个有用的.complete图像对象的属性,你可以使用它,如果你已经设置了.src你的<img>连接到它的任何事件侦听器之前:

var img=document.getElementById('myimg');
var func=function(){
    // do your code here
    // `this` refers to the img object
};
if(img.complete){ 
    func.call(img);
}
else{ 
    img.onload=func; 
}

参考:http://www.w3schools.com/jsref/prop_img_complete.asp

Answer 3

我会给需要这个约束的图像一个类,如下所示mustLoad:

<img class="mustLoad" src="..." alt="" />

然后创建一个通用的图像加载处理函数,例如:

$('img.mustLoad').on('load',function(){
        /* Fire your image resize code here */
});

编辑:

回应您对.load()上述.load()弃用的评论,不赞成使用,.on('load') 以减少onLoad事件和Ajax加载之间的歧义.

Answer 4

在等待加载多个图像的情况下:

var images = $("#div-with-images img");
var unloaded = images.length;
images.on('load', function(){
  -- unloaded;
  if (!unloaded) {
    // here all images loaded, do your stuff
  }
});