jQuery Ajax加载图像问题

Question

我有一个代码可以调用$ .load（）来获取HTML片段。在片段中会有一张图片列表和一个脚本，它们将根据列表大小进行一些计算。该片段看起来像

<div> 
    <ul> 
    <li><img .../></li> 
    <li><img .../></li> 
    ... 
    </ul> 
</div> 

<script> 
    //... script to do calculation on the list width 
</script>  

最初，我使用css的最大宽度，以确保图像不会超过180px。但是由于IE没有最大宽度，我使用表达式hack。但是，似乎在第一次加载图像时，脚本无法获得图像列表的正确宽度。看起来像脚本加载早于CSS表达式。

如果它是一个新的页面，我当然可以调用$（window）.load（）来确保所有的图像都被加载。但是，我可以在ajax html片段请求中做什么？

Answer 1

DEMO：http://jsbin.com/ehawa/2

Javascript方法为offsetWidth

ES：。的document.getElementById（ “UL_ID”）offsetWidth

实施例工作的代码与jQuery：

 <style> 
     ul { list-style:none; margin:0; padding:0 } 
     ul li { margin:10px } 
     ul li img { /* width:180px */ } 
     div { float:left; width:200px; background:#333 } 
     </style> 

     <script> 
    $(function() { 

     setImgWidth(); 

    }); 

// then Insert the same function After the Ajax Call 

function setImgWidth() { 

    $('ul li > img').each(function() { 
     //get it's width 
     var img = $(this).width(); 
     if (img > 180) { 
      $(this).attr('style', 'width:180px'); 
     } 
    }); 

} 
     </script> 


    <div> 
     <ul> 
     <li><img src="http://l.yimg.com/g/images/home_photo_junku.jpg" alt=""/></li> 
     <li><img src="http://l.yimg.com/g/images/home_photo_tarotastic.jpg" alt=""/></li> 
     </ul> 
    </div> 

希望对您有所帮助！