Question

I use this javascript to resize, to a max of 800px, a big (5Mb) image on a page:

 <script type="text/javascript">
 $(document).ready(function () {
     $('.detailImg').each(function () {
         var maxWidth = 800; // Max width for the image
         var maxHeight = 800;    // Max height for the image
         var ratio = 0;  // Used for aspect ratio
         var width = $(this).width();    // Current image width
         var height = $(this).height();  // Current image height

         // Check if the current width is larger than the max
         if (width > maxWidth) {
             ratio = maxWidth / width;   // get ratio for scaling image
             $(this).css("width", maxWidth); // Set new width
             $(this).css("height", height * ratio);  // Scale height based on ratio
             height = height * ratio;    // Reset height to match scaled image
             width = width * ratio;    // Reset width to match scaled image
         }

         // Check if current height is larger than max
         if (height > maxHeight) {
             ratio = maxHeight / height; // get ratio for scaling image
             $(this).css("height", maxHeight);   // Set new height
             $(this).css("width", width * ratio);    // Scale width based on ratio
             width = width * ratio;    // Reset width to match scaled image
         }
     });
 });

When page is loaded the image is not resized. No errors on FireBug console.
If I try to refresh the page with F5, the image get resized!
If I try Ctrl + F5, images return at original size!

Where is the problem? Why this javascript only works when the page is refreshed?

Answer 1

Your images aren’t loaded when your document.ready() runs. document.ready() fires on load of the DOM, but at that point the images may still be loading — especially if they’re 5MB! Because of this, the image height and width aren’t available at the point your script is running. I’d guess it’s working on F5 because the images are still cached, so are then loaded fast enough for their dimensions to be known when your script runs. Ctrl–F5 clears the image cache, so after that, you’re back where you started.

As I noted in my comment, using the load() event of an image may help, but even then, sometimes it’s not triggered properly. For example, some browsers will never fire the load() event for an image that’s already in the browser cache (as, technically, it’s not been loaded…)

There are a few different workarounds for this doing the rounds — Paul Irish’s plugin might be useful; include the plugin code and then use something like:

 $('.detailImg',this).imagesLoaded(function() {
   // Your existing function code
 });

Alternatively, if you know the image size in advance, just specify it in your img element, e.g. <img src="whatever" height="1200" width="1600" alt="whatever" />. That way jQuery will be able to tell the width and height whether the image is loaded or not.