Js/jQuery代码判断图片是否加载完毕
我们在做网页的时候难免有时会需要获取不特定图片的尺寸，这往往需要在图片加载完成以后才可以实现。最常见的就是Ajax方式的瀑布流加载，必需知道图片高度效果才能完美，而图片则必须加载完毕才能被计算出高度，这时就需要对图片加载状态进行判断。今天我们就来分享两种兼容性比较好的Js/jQuery代码判断图片是否加载完毕的方法：
第1种，利用图片没有加载完成的时候，浏览器渲染获取的宽高为0进行判断，代码如下：
var t_img; // 定时器
var isLoad = true; // 控制变量
// 判断图片加载状况，加载完成后回调
isImgLoad(function(){
// 加载完成
});
// 判断图片加载的函数
function isImgLoad(callback){
// 注意我的图片类名都是cover，因为我只需要处理cover。其它图片可以不管。
// 查找所有封面图，迭代处理
$('.cover').each(function(){
// 找到为0就将isLoad设为false，并退出each
if(this.height === 0){
isLoad = false;
return false;
}
});
// 为true，没有发现为0的。加载完毕
if(isLoad){
clearTimeout(t_img); // 清除定时器
// 回调函数
callback();
// 为false，因为找到了没有加载完成的图，将调用定时器递归
}else{
isLoad = true;
t_img = setTimeout(function(){
isImgLoad(callback); // 递归扫描
},500); // 我这里设置的是500毫秒就扫描一次，可以自己调整
}
}这种方法能同时兼容谷歌、火狐、IE浏览器。
第2种，利用img的complete属性进行判断，完整示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>img - complete attribute</title>
</head>
<body>
<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1">loading...</p>
<script type="text/javascript">
function imgLoad(img, callback) {
var timer = setInterval(function() {
if (img.complete) {
callback(img)
clearInterval(timer)
}
}, 50)
}
imgLoad(img1, function() {
document.getElementById("p1").innerHTML='加载完毕';
})
</script>
</body>
</html>原理就是循环监测img的complete属性，如果图片已经加载完毕，则返回true停止监测。该属性所有浏览器都支持。
