Javascript高度問題

我正在使用javascript爲頁面上的所有圖像文章添加垂直或水平類。我遇到代碼正在工作的問題，但它總是向文章類添加.horizontal，甚至包含應該有.vertical（包含圖片大於450px的帖子）的照片。任何幫助，將不勝感激。Javascript高度問題

$('img.photo').each(function(){ 
      if($(this).height() > 450) { 
       $(this).closest('article').addClass('vertical'); 
      } else { 
       $(this).closest('article').addClass('horizontal'); 
      } 
     });

舉例：http://blog.jamescharless.com/ 孩子的第一張照片是遠遠超過450像素高的，但它不具有類的垂直，而是有水平的。

來源

2012-09-11 James Charless Dickinson

適合我..剛剛測試。 [JSFiddle]（http://jsfiddle.net/93dTG/） –

你能發佈一些html嗎？ –

添加一些日誌記錄：'console.log（this，$（this）.height（））' – Joe

嘗試改變.each到.load，使函數被調用爲每個圖像一旦加載：

$('img.photo').load(function(){ 
      if($(this).height() > 450) { 
       $(this).closest('article').addClass('vertical'); 
      } else { 
       $(this).closest('article').addClass('horizontal'); 
      } 
     });

來源

2012-09-11 20:07:21 ori

兩個可能的原因的高度並不如預期

圖像尚未加載並沒有在CSS中定義的高度
圖像尚未顯示（display: none）

您的代碼可能會利用load回調，並且還應該檢查圖像不是:hidden。

$(function(){ 
    $('img:not(:hidden)').load(function(){ 
     // logic 
    }); 
});

來源

2012-09-11 20:07:37

Javascript高度問題

回答

相關問題