判断页面中的图片是否加载完成
有时候需要在页面一开始就获取图片的高度进行一些操作,有个问题就是在获取图片高度的时候图片还没有完全加载完成,这样获取的图片高度是0。所以需要在获取图片高度之前判断一下图片是否加载完成。
如果只要监听一张图片,可以使用onload
$('img').load(function(){
// 加载完成
});
如果有很多图片需要一起箭筒的话上面的方法就需要执行好几次
var t_img; // 定时器
var isLoad = true; // 指定的图片是否加载完成
// 判断图片加载状况,加载完成后回调
isImgLoad(function(){
// 加载完成
});
// 判断图片加载的函数
function isImgLoad(callback){
// 'cover'是要监听图片的类名。
// 查找所有封面图,迭代处理
$('.cover').each(function(index, val){
// 找到为0就将isLoad设为false,并退出each
if(!val.complete){ // 判断是否加载完成
isLoad = false;
return false;
}
});
// 为true,图片加载完毕
if(isLoad){
clearTimeout(t_img); // 清除定时器
// 回调函数
callback();
// 为false,有图片没有加载完成,将调用定时器递归
}else{
isLoad = true;
t_img = setTimeout(function(){
isImgLoad(callback); // 递归扫描
},200); // 200毫秒就判断一次,可以自己调整
}
}