js判断图片加载完成后再执行代码

浏览器在处理图片时，图片下载是需要一定时间的。当图片还没有下载完时，使用js进行操作，如获取元素宽高将是0,因而某些情况下需要判断图片加载是否完毕，加载完毕后再执行js代码。

怎么判断呢？直观思路使用jQuery的ready()函数，

jQuery(function(){
  //判断图片是否加载完成
});

事实上不行，jquery的ready只是dom的结构加载完毕，即认为加载完毕；而此时图片很可能没有加载完毕，宽高为0，视频或音频、动画等都基本未加载。

对应的，原生js的window.onload是指dom的生成和资源的加载，比如flash、图片完全加载出来后才执行onload；似乎可以，的确也可以，但期有一个显然的缺点，如果某一个图片很大迟迟加载不出，会阻止其它js的正常执行。

jQuery中有Deferred对象，可以基于Deferred实现一个和window.onload功能类似的，在其中进行图片加载完毕判断，直接贴出本人项目中成功实现的全部代码：

var imgdefereds=[];
jQuery('img').each(function(){
    var dfd=jQuery.Deferred();
    $(this).bind('load',function(){
        dfd.resolve();//load执行代表图片加载完成
    }).bind('error',function(){
        //图片加载错误，加入错误处理
        // dfd.resolve();
    });

    if(this.complete) {//complete属性为true，代表图片加载完成
        dfd.resolve();
    }
    imgdefereds.push(dfd);
})
jQuery.when.apply(null,imgdefereds).done(function(){
    adaptDivHeight();//图片全部加载完毕，自己的逻辑，修改div高度
});

使用时只需要adaptDivHeight()替换为自己的函数即可，这样在所有的图片加载完毕后才会执行adaptDivHeight()，在adaptDivHeight()中判断图片高宽将是真实高宽。

下面说如何判断图片已经加载完毕，可能通过两种方式：

1. load事件：

所有浏览器都支持img的load事件，可以使用以下代码判断：

$('img').load(function(){
  // 加载完成    
});

以上是单张图片判断，多张可以设置计算器；这段代码对于Firefox类浏览器及IE首次加载可以，当IE缓存图片后，总是从缓存文件里去拿，这样造成load方法根本不执行，只有新图片才会走load；上述代码中使用了load事件。 2. img的complete属性 img元素具有complete属性，如果为true则表明图片已经加载完毕，该属性所有浏览器都支持。

上述代码中判断了complete属性。

参考资料：

http://www.cnblogs.com/snandy/p/3704938.html

js判断图片加载完成后再执行代码

猜你喜欢