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

jQuery or Javascript check if image loaded

本文关键字：加载 图像 是否 检查 Javascript jQuery      更新时间：2023-09-26

我知道Stackoverflow上有很多这样的东西，但在最新版本的jquery（1.10.2）中我还没有找到一个适合我的。

我确实尝试过：

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

但我相信，经过一些研究，使用.load来检测图像负载在jQuery1.8中已被弃用。我需要做的是在加载图像后启动图像调整功能。我无法控制HTML，现在我不得不通过jQuery添加图像维度，在页面加载后附加一个属性（通过.attr()），这样我就可以使用lazyload js了。

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

我通常这样做：

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

图像对象还有一个有用的.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

我会给需要这个约束的图像一个类似mustLoad的类，其中：

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

然后创建一个通用的图像加载处理程序函数，例如：

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

编辑：

针对您在上面关于弃用.load()的评论，.load()被弃用，取而代之的是.on('load')，以减少onLoad事件和Ajax加载之间的歧义。

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

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

我需要做的是在加载图像后启动图像调整功能。

你确定你需要加载图像吗？在调整图像大小之前等待加载图像可能会导致页面布局大幅跳跃，尤其是在图像文件大小较大（如动画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);
    }
})();

希望这能有所帮助！

相关文章：