【原】js獲取height為auto的高度問題

今天用react寫一個頁面，需要獲取一個img高度設置為auto的高度，可是一直獲取到的要么是0，要么是null,因為頁面加載完了圖片不一定加載完。

當我把高度由 auto 設置為固定值之后，又可以獲取到該img的高度。可是我就是不想要固定的高度啊。

於是，度娘之，得到的答案是

var imgHeight=document.getElementById("img").offsetHeight;
alert(imgHeight)

//或者

var imgHeight=document.getElementById("img").clientHeight;
alert(imgHeight)

按照上面這個方法走，然而，並沒有用。還是獲取不到

於是，群上問了問，有人建議用

$(document).ready(function(){

 　//你的代碼

});

但是這個也沒有用，因為jquery的ready只是dom的結構加載完畢，它便以為加載完成。(缺點是圖片沒有加載完畢，寬高為0，程序出錯)

 

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

 

經過不懈努力，找到了解決方法，那就是用圖片加載完成事件

 

$('img').load(function(){
  // 加載完成之后你要執行的函數   
});

用這種方法，你就可以在圖片加載完成時獲取到圖片高度了。當然，這個方法只可以獲取到一張圖片的高度。如果你想全部加載完走一次，可以用下面的方法

va 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毫秒就掃描一次，可以自己調整
    }
}

　這樣就完美解決了計算圖片高度的問題。

 

此文參考網上的例子，網上還有很多類似的解決方法。大家可以去看看