有时候我们需要获取页面中图片的宽高来完成某些操作,但是要想准确获取到图片的尺寸,需要一个前提条件,就是等待图片加载完之后再获取,就不会出问题了。不然图片未加载完就获取的话,获取的宽高为0;
那么问题来了,怎么判断图片是否加载完了呢? 这里利用图片没有加载完成的时候,宽高为0。我们很容易判断图片的一个加载情况。
使用定时器,每隔500毫秒获取一次图片的宽高;直到图片宽高不为0,即图片加载完成,此时获取到的图片的尺寸,就是图片加载完之后的尺寸。
代码如下:
vart_img;// 定时器
varisLoad=true;// 控制变量
// 判断图片加载状况,加载完成后回调
isImgLoad(function(){
// 加载完成
});
// 判断需要判断的图片是否加载完成的函数
functionisImgLoad(callback){
$('.img').each(function(){
// 高度为0,说明有图片还未加载完成,将isLoad设为false,并退出each
if(this.height===0){
isLoad=false;
returnfalse;
}
});
// 直到图片没有发现为0的。加载完毕
if(isLoad){
clearTimeout(t_img);// 清除定时器
callback();
// 为false,因为找到了没有加载完成的图,将调用定时器递归
}else{
isLoad=true;
t_img=setTimeout(function(){
isImgLoad(callback);// 递归扫描
},500);// 我这里设置的是500毫秒就扫描一次,可以自己调整
}
}
网友评论