應用從圖像的高度和寬度

Question

文本我有這樣的代碼

<script src='js.js'></script> 
    <script> 
    (function($){ 
    var img = document.getElementsByClassName('x'), 
      L = img.width(), 
      T = img.height(); 
    for (var i=0,len=img.length;i<len;i++){ 
    img[i] = $('#u').text("Width" + L + "Height " + T) 
    } 
    }); 
    </script> 
<div id='image'> 
    <img class='x' src='1.jpg'/> 
    <span id='u'></span> 
    </div> 
    <div id='image'> 
    <img class='x' src='5.jpg'/> 
    <span id='u'></span> 
    </div> 

我想在<span id='u'></span> 申請文本的寬度和圖像的高度，但不起作用，

Answer 1

你必須等待爲得到完全加載圖像..

所以HTML是

<div id='image'> 
     <img class='x' src='1.jpg'/> 
     <span id='u'></span> </div> <div id='image'> 
     <img class='x' src='5.jpg'/> 
     <span id='u'></span> 
</div> 

應用代碼

<script type="text/javascript"> 

    $(document).ready(function(){ 
        // reset src back to original..so that it works on cached images 
        $('img').each(function() 
        { 
        $(this).attr("src",$(this).attr("src")+"?_="+Math.random()); 
      }); 

        $('img').load(function() 
        { 
          var h = $(this).height(); 
          var w = $(this).width(); 
          // nearest span ..set its text 
        $(this).parent().find('span').html("Height :"+h +"_ _ _"+"Width :"+w); 
         } 
       ); //end img load 

    }); 

</script> 

編輯：如果圖像獲取緩存圖像加載事件不正確觸發， 添加代碼重置SRC

補充：Fiddle

http://www.stoimen.com/blog/2009/08/05/jquery-check-whether-image-is-loaded/