jQuery width attribute error

[longtone]

I have a div #rotator, containing a number of images.

I am using this jQuery code to get the dimensions of the div and the first  image:

            //get size of div
            
            this.div_width =  $("#rotator ").width();
            this.div_height =  $("#rotator ").height();
            
           //get size of image
            
            this.img_width =  $("#rotator img:eq(0)").width();
            this.img_height =  $("#rotator img:eq(0)").height();

 

sometimes it works, sometimes the image dimensions come back completely wrong eg: 14 instead of 200

 

Any ideas why, and how to fix it?

 

[yperevoznikov]

Hi Longtone,

 

Probably images just don't load to moment you get its dimensions. Can you get these dimensions by .bind("load", method) for your image. I think you use OOP and you need bind method, so you can find how to bind method of class in my blog http://bit.ly/9nWaGV if you wish.

 

Thanks.

[longtone]

Thanks, I'll try that

 

I'm not sure that's the problem though, because I get the width error on the first image, which is loaded with the page, not the subsequent images loaded with JS

 

And surely the first image should be fully loaded before $(document).ready calls any functions?

 

I've got round it for now by making all the images the same size, but that does increase bandwidth and causes me unnecessary work...

[.josh]

I don't think $(document).ready waits for images to completely load...

[RichardRotterdam]

CV is right the ready function waits till the DOM is ready and not for the whole page to load $.ready() != window.onload

 

Try something like the following :

// wait for the while page to be loaded
$(window).load(function(){
// your image script
});