區分垂直和水平圖像格式jQuery

Question

我想區分圖像是垂直還是水平格式並添加特殊類。我用這個來充分利用我的形象。

我的HTML：

<a href="images/gallerie/image-1.jpg" data-lightbox="image-1" class="impression"> 
    <img src="images/gallerie/image-1.jpg"> 
</a> 

我的CSS：

.wide { 
    height: 100%; 
    width: auto; 
} 

.tall { 
    height: auto; 
    width: 100%; 
} 

我的JS（jQuery的）：

$('.impression').find('img').each(function() { 
    if($(this).width()/$(this).height() > 1) { 
     $(this).addClass('wide'); 
    } 

    else { 
     $(this).addClass('tall'); 
    } 
}); 

它的工作原理只是有時，我不知道爲什麼。 在我的iPhone上它永遠不會工作（Chrome）。

有沒有人有其他的解決方案，或者有時它的原因？

謝謝！

Answer 1

您需要使用load事件處理程序，以便加載圖像之前，你可以檢查尺寸

$('.impression').find('img').on('load',(function() { 
    // image is loaded now 
    if($(this).width()/$(this).height() > 1) { 
     $(this).addClass('wide'); 
    } 

    else { 
     $(this).addClass('tall'); 
    } 
}); 

是不需要的each如jQuery將使用each內部和this將圖像實例

Answer 2

最可能，你正在運行的功能太快，你的圖像尚未加載。爲了確保，您可以始終使用console.log()的值.width()和.height()。

檢查尺寸時確保圖像已加載的最佳方法是使用load事件。

$('img').on('load', function(){ 
    // do your thing... 
}) 

其餘的錯誤，正如@charlietfl指出的那樣。 img的load事件不會傳播。

更重要的是，而不是一個監聽綁定到每個 img，只要綁定一個在 body您的所有圖片，包括你將載入以後的那些，用一些花哨的異步方法：

$('body').on('load', 'img', function(){ 
    // do your thing... 
}) 

這第二個版本會在您的DOM中每次運行 <img> load，而不僅僅是在運行 script時。