JS 判断图片加载完成
2017-12-13 本文已影响0人
追梦_1c27
有时候我们需要获取页面中图片的宽高来完成某些操作，但是要想准确获取到图片的尺寸，需要一个前提条件，就是等待图片加载完之后再获取，就不会出问题了。不然图片未加载完就获取的话，获取的宽高为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毫秒就扫描一次，可以自己调整
}
}
