JS 判断图片加载完成

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

}

}

​