Js/jQuery代碼判斷圖片是否加載完畢

2017年11月16日 19:49:47益點益滴2588

我們在做網頁的時候難免有時會需要獲取不特定圖片的尺寸,這往往需要在圖片加載完成以后才可以實現。最常見的就是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停止監測。該屬性所有瀏覽器都支持。

超贊,真給力!嗯,必須鼓勵~

打賞 0

歡迎點評!或反饋疑問...

支持Ctrl+Enter提交
暫無留言,快搶沙發!
賬號:mxy310@163.com[復制]
賬號:77940140[復制]

深切哀悼

抗擊新冠肺炎疫情斗爭犧牲烈士和逝世同胞!

×
M
海南环岛赛彩票奖金