Js/jQuery代码判断图片是否加载完毕

2017-11-16JavaScript1600
  • 详情内容
  • 留言点评

我们在做网页的时候难免有时会需要获取不特定图片的尺寸,这往往需要在图片加载完成以后才可以实现。最常见的就是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停止监测。该属性所有浏览器都支持。

欢迎点评!也可以是问题反馈和建议

支持Ctrl+Enter提交
暂无留言,快抢沙发!
0

真心很赞,必须打赏!嗯,以资鼓励~

点此打赏

99%看过的人还会看