jQuery Ajax charger le problème d'images

Question

J'ai un code qui appelle $ .load() pour obtenir un fragment HTML. Dans le fragment, il y aura une liste d'images et un script qui ferait un calcul basé sur la taille de la liste. Le fragment ressemble à

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

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

À l'origine, j'utilise la largeur maximale de css pour m'assurer que l'image ne dépasserait pas 180px. Mais comme IE n'a pas de largeur maximale, j'utilise l'expression hack. Cependant, il semble que lorsque l'image est en premier chargement, le script ne peut pas obtenir une largeur correcte de la liste d'images. Il semble que le script soit chargé plus tôt que l'expression CSS.

S'il s'agit d'une nouvelle page, je peux certainement appeler $ (window) .load() pour m'assurer que toutes les images sont chargées. Mais que puis-je faire dans une requête de fragment ajax html?

Answer 1

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

méthode Javascript est pour offsetWidth

es:. Document.getElementById ("UL_ID") offsetWidth

EXEMPLE DE TRAVAIL CODE avec 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> 

espérons que cette aide!