浏览器在处理图片时,图片下载是需要一定时间的。当图片还没有下载完时,使用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则表明图片已经加载完毕,该属性所有浏览器都支持。
上述代码中判断了complete属性。