浏览器在处理图片时,图片下载是需要一定时间的。当图片还没有下载完时,使用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(){
  // 加载完成    
});

     2. img的complete属性

  img元素具有complete属性,如果为true则表明图片已经加载完毕,该属性所有浏览器都支持。

等待fragment resume再执行 js等待执行完再执行_图片加载

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