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, чтобы изображение не превышало 180 пикселей. Но поскольку у IE нет максимальной ширины, я использую выражение hack. Однако кажется, что при первой загрузке изображения скрипт не может получить правильную ширину списка изображений. Похоже, скрипт загружается раньше, чем выражение CSS.

Если это новая страница, я, конечно, могу вызвать $ (window) .load (), чтобы убедиться, что все изображения загружены. Но что я могу сделать в запросе фрагмента HTML AJAX?

Answer 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>

надеюсь, что это поможет!