Les navigateurs webkit obtiennent éléments.width() faux

Question

J'essaie d'obtenir la largeur calculée correcte d'un conteneur. Tous les navigateurs obtiennent correctement la largeur calculée. (même IE) mais étonnamment les navigateurs Chrome et webKit obtiennent un nombre câblé.

J'essaie d'obtenir la largeur totale du <li> en incluant sa bordure et son rembourrage + sa marge droite.

multiplier ensuite que par la longueur des <li> « s pour obtenir la largeur exacte nécessaire pour les tenir

Je traqué le problème avec le calcul de largeur.

Quelqu'un peut-il me dire ce qui est mal.

Merci

HTML

<div id="videoTotorialTumbs"> 
    <a href="#" id="thumbLeftArrow" class="inActive"></a> 
    <a href="#" id="thumbRightArrow"></a> 
     <div id="horizontalBelt"> 
     <ul style="width: 1056px;"> 
      <li><a rel="video1" href="#"><img src="http://dummyimage.com/110x90.jpg">  <span>Upload images</span></a></li> 
      <li><a rel="video2" href="#"><img src="http://dummyimage.com/110x90.jpg"><span>Choose Theme</span></a></li> 

     </ul> 
    </div> 
</div> 

JS

var videoContext = $("#horizontalBelt"), 
videoBeltUL = videoContext.find("ul"), 
videoBeltLI = videoContext.find("li"), 
videoLength = videoBeltLI.length, 
videoWidth = parseInt(videoBeltLI.eq(0).outerWidth())+parseInt(videoBeltLI.eq(0).css("marginRight")), 
beltTotalWidth = videoLength*videoWidth, 
     // js goes on.... 

beltTotalWidth a une valeur différente dans WebKit.

Answer 1

Vous appelez cela de

$(document).ready(...)?

si oui essayez d'utiliser

$(window).load(...)

Answer 2

Si vous ne voulez pas attendre l'événement windowload, vous pourriez exécuter sur l'événement load de chaque image à la place. Comme Gaby l'a dit dans un commentaire, si vous connaissez les dimensions de l'image, ajouter width propriétés à vos images vous permettrait de l'exécuter plus tôt.