jQuery 或 Javascript 检查图像是否加载

Question

我知道 Stackoverflow 上有很多这样的内容，但我还没有在最新版本的 jquery (1.10.2) 中找到适合我的内容。

我试过了：

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

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

问题是我需要一种准确的方法来推迟我所有的各种脚本，直到图像正确加载，否则函数有时会在每个图像加载之前触发。我曾尝试使用$(window).load(function (){});，但有时它仍会在每张图片加载之前触发。

Answer 1

在等待加载多张图片的情况下：

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

Answer 2

图像对象还有一个有用的.complete 属性，如果您在附加任何事件侦听器之前已经设置了<img> 的.src，则可以使用它：

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 */
});

编辑：

作为对您的 cmets 关于弃用上述 .load() 的回应，.load() 已被弃用，而在 onLoad 事件和 Ajax 加载之间支持.on('load') to reduce ambiguity。

Answer 4

我需要做的是在加载图像后触发图像调整大小功能。

您确定需要加载图像吗？在调整图片大小之前等待图片加载可能会导致页面布局发生较大的跳跃，尤其是当图片具有较大的文件大小时，例如动画 GIF。

通常，对于图像调整大小，您只需要知道图像的固有尺寸即可。虽然没有事件可以告诉您这一点，但轮询图像以获取数据很容易。像这样的东西可能特别有效：

<img src="..." data-resizeme="123" />

(function() {
    var images, l, i, tmp;
    if( document.querySelectorAll) {
        images = [].slice.call(document.querySelectorAll("img[data-resizeme]"),0);
    }
    else {
        tmp = document.getElementsByTagName("img");
        images = [];
        // browser compatibility is fun!
        for( i=tmp.length-1; i>=0; i--) {
            if( tmp[i].getAttribute("data-resizeme")) images.unshift(tmp[i]);
        }
    }

    for( i=images.length-1; i>=0; i--) {
        images[i].onload = resizeImage;
        images[i].onerror = cancelImageResize;
    }
    var timer = setInterval(function() {
        for( i=images.length-1; i>=0; i--) {
            if( images[i].width) {
                resizeImage.call(images[i]);
                images[i].onload = null;
                cancelImageResize.call(images[i]);
            }
        }
        if( images.length == 0) clearInterval(timer);
    },100); // adjust granularity as needed - lower number is more responsive.

    function cancelImageResize() {
        var i;
        for( i=images.length-1; i>=0; i--) {
            if( images[i] == this) {
                images.splice(i,1);
                break;
            }
        }
    }

    function resizeImage() {
        console.log("Image "+this.src+" is "+this.width+"x"+this.height);
    }
})();

希望这会有所帮助！

Answer 5

我通常这样做：

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 事件中继续执行脚本。