jQuery image resize gone wrong!

Question

A few days ago, I was wondering why when I set the images' width and length attributes on my site to percentages, it wasn't scaling the image down the way I thought it should.

The problem was that I wanted it to scale the image down, but it was actually scaling down the images' container.

Anyway, I was actually fond of Pat's suggestion to resize the images using a snippet of jQuery, because I can easily apply it to all of my images that have a class of fancybox, in other words, my product images, which, upon clicking, display the fancybox effect.

However, for some reason, it is behaving kind of screwy.

If you point your browser so you can view the problem on my page, at http://www.marioplanet.com/product.htm you may see the problem.

If you have visited my site before in order to help me debug, which I appreciate, please make sure you delete your cookies for my site, and empty the cache, as it appears to only have a problem upon a first visit.

The problem appears to be different for different browsers:

Firefox (3.6.8) and IE (8): Underneath the bold text reading: "Category Plush" where the images should be properly resized, they are way to small.

Chrome (5.0.375.125) and Safari (5): Underneath that same bold text where the images should be, there are just two outlined squares and nothing else.

The "fixes" that I have found as far as not updating the code appear to be:

Firefox (3.6.8) and IE (8): A simple refresh, and the images go back to the size I want them to be upon first visiting.

Chrome (5.0.375.125) and Safari (5): By pointing these two browsers to the URL http://www.marioplanet.com/product.htm# which can easily be done by adding the pound symbol (#) or by clicking the YouTube icon in the "Follow Us On" social networking tray, the images will be sized the way I would like them to be upon first visit.

So, I was thinking, regarding the jQuery snippet, that perhaps the .width() action doesn't have widespread support, Googling yielded no results, and that wouldn't make sense to not have it work well across ANY major browser.

So, then I was thinking perhaps the snippet of jQuery was not in the $(document).ready event handler, so the DOM, and therefore the images, had not been properly loaded. Upon investigation of my code, everything looked ok.

Finally, I was wondering if any sizing remaining on my images had screwed up the jQuery resizing and everything again seemed ok, but perhaps it has to do with the width of the tables and table rows and cells?

Any suggestions or ideas as to what the problem is would be much appreciated!!

Thanks!

Answer 1

The problem is indeed your $(document).ready handler, when this runs the DOM is ready, images may not be, and probably won't be on the first load. The reason it works on reload is the images are cached, and so are loading instantly.

There's an easy fix for this this though, instead of $(document).ready use the window.onload event, like this:

$(window).load(function() {
  //code that needs images
});

The main difference is that onload runs after the images are loading, so .width() will give you the correct value, instead of 0.