jquery .width() chrome and safari problem

问题:

I have set in css the height of an image to a certain value and the width modifies automatically so that the aspect ratio is preserved. I'm using the .width() jquery function to get the width of the image after the css resized the image. in Firefox and internet explorer this works great but in chrome and safari the width returned is always 0 for each image. the code that i am using is the following:

var total=0; 
var widthdiv=0;
$(function(){
    $('.thumb').each(function(){
       widthdiv=$(this).width();
       total+=widthdiv;
       alert(widthdiv); //added so i can see what value is returned.
    });
});

and the css for the images:

#poze img{
    height:80px;
    width:auto;
    border:0px;
    padding-right:4px;    
}

回答1:

In document.ready (which you're currently using) images may or may not be loaded, if they're not in cache they probably aren't loaded. Instead use the window.onload event when the images are loaded, like this:

var total=0; 
$(window).load(function() {
  $('.thumb').each(function() {
    total += $(this).width();
  });
});