jQuery Ajax 加载图片问题答案

【问题标题】：jQuery Ajax load images problemjQuery Ajax 加载图片问题
【发布时间】：2010-03-13 05:10:19
【问题描述】：

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

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

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

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

如果是新页面，我当然可以调用 $(window).load() 来确保所有图片都加载完毕。但是我可以在 ajax html 片段请求中做什么？

【问题讨论】：

标签： javascript jquery image css

【解决方案1】：

演示： 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>

希望对您有所帮助！

【讨论】：

没有。实际上我正在计算 ul 里面的 lis 向左浮动的宽度。 li 包含具有 css max-width 属性的图像。但由于 IE 没有最大宽度，我必须使用表达式：this.width
在 ajax 场景中，您只需将上面的 jquery 调用放在一个函数中，并在 ajax 请求后调用它，它应该可以按预期工作！告诉我！