jQuery .addClass基於圖像寬度

Question

我在做什麼：

我有一個文章佈局我正在製作跨越700個像素。文章的頂部是圖片。當圖像寬度小於600像素時，我希望圖像爲float:left;，但是當圖像寬度超過600像素時，我需要它所在的div，將其擴大到全部700像素，以便強制文本在它下面。例如：我有一個640像素寬的圖像。不幸的是，文本仍然包裝，所以我得到了圖像右側的大量詞語......這就是爲什麼我想要圖像所在的div跨越整個寬度。

我一直試圖讓我的jQuery工作，我已經嘗試了3種不同的方法，但都沒有工作。我想我錯過了一些東西。它所做的只是使圖像的寬度達到700像素。

<div class="story-img"> 
    <img src="images/sample-article-sm.png" alt="A guy installing Solar Panels" width="350"/><br/> 
    <span class="caption">Solar panels being installed on a roof.</span> 
</div> 

的jQuery我使用的是：

$(document).ready(function() { 
var img = $(".story-img > img"); 
var storydiv = $(".story-img"); 
var width = img.width(); 
if (width < 300) 
    storydiv.addClass("large"); 
}); 

jQuery的工作，因爲它應該和它添加該類到div「.story-IMG」，但不管它是圖像寬度。起初我認爲這是因爲圖像中沒有指定寬度（這將被動態加載）。爲什麼不抓住寬度？

Answer 1

其實你抓寬度之前的圖像被添加到DOM

所以請嘗試使用load事件

$('.myImage').load(function(){ 
    alert($(this).width()); 
    alert($(this).height()); 
    //do something here 
});