js判斷圖片是否加載完畢

附件：

https://www.jb51.net/article/102385.htm

問題：

 .offset().top和$(window).scrollTop()每次刷新頁面后滾動的值有時候會不一樣，導致有時候定位不准

解答：

因為 圖片未加載完全   高度塌陷之類的  取值問題

如圖：兩次刷新值都不一樣

 

//圖片加載完畢再執行
    var t_img; // 定時器
    var isLoad = true; // 控制變量
    // 判斷圖片加載狀況，加載完成后回調
    isImgLoad(function(){
     // 加載完成
     if ($(".J_testFixedShow").length && $(".J_hideTestFixedBtn").length) {
            var h = $(".J_hideTestFixedBtn").offset().top + 150;
            var topShow = $(".J_testFixedShow").offset().top;
            var topNum = $(".J_testFixedTop").length > 0 ? ($(".J_testFixedTop").offset().top - 20) : 200;
            var testBtn = $("#testFixedBtn");
            $(window).scroll(function() {
                var wt = $(window).scrollTop();
                if (wt > topShow && wt < h) {
                    $('#testFixedBtn').show();
                    $('.public_footer_servers').css('padding-bottom', '50px')
                } else {
                    $('#testFixedBtn').hide();
                    $('.public_footer_servers').css('padding-bottom', '20px')
                }
            });
            testBtn.on('click', function() { $('html,body').scrollTop(topNum) })
        }
    });
    // 判斷圖片加載的函數
    function isImgLoad(callback){
     // 查找所有圖，迭代處理
     $('img').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毫秒就掃描一次，可以自己調整
        }
    }

在腳本之家看到一篇文章：

例如我的圖片地址：

http://xxx.xxx.com/sc/item/cover/9-4352-c400.jpg

 而圖片下載到本地是需要一定時間的(網速快的路過)。當圖片還沒有下載完的時候，使用js獲取到元素的寬高將會是0。

有的同學說了我使用jquery的ready不就好了。如下：

$(document).ready(function(){
 // 在這里寫你的代碼...
});

如果這么簡單就好了，我這里就說下ready與window.onload的區別。

 

jquery的ready只是dom的結構加載完畢，便視為加載完成。(缺點是圖片沒有加載完畢，寬高為0，程序出錯)

js的window.onload是指dom的生成和資源的加載，比如flash、圖片完全加載出來后才執行onload。(缺點就是當某一張圖片很大的時候，豈不阻止了其它js的正常執行)

知道了他們的區別后，我們再來談談如何避免錯誤和選擇性使用。

如果你進行了百度，很多人會告訴你。

這樣：

$('img').load(function(){
 // 加載完成 
});

好像很強大的樣子，其實不然，他的缺點是每加載一張圖片，回調函數就執行一次。好吧太煩了，我只想全部加載完走一次就可以了。當然可以，你可以進行修改如下：

var imgNum=$('img').length;
$('img').load(function(){
 if(imgNum){
 // 加載完成
 }
});

這樣總可以了吧，我加載一張，就用圖片總數去減一，減到0我就加載完畢。看起來很完美，前提是你沒遇到IE。

IE的圖片總是從緩存文件里去拿，這就造成load方法根本就不執行，只有是新圖片才會走load。

服了吧？繼續往下看。

或者是這樣：

document.getElementById('img').onload=function(){
 // 加載完成 
};

看我原生代碼一統天下，實際上效果甚微，一次只能處理一個你准備寫多少個document，有人說我可以用循環去綁定，經過我測試貌似根本沒效果。

還是一笑而過吧。看看我的最終解決方案（兼容：谷歌&火狐&IE）

利用圖片沒有加載完成的時候，寬高為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毫秒就掃描一次，可以自己調整
 }
}

　原鏈接：https://www.jb51.net/article/102385.htm