Javascript resize big image only works after F5

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?

What happens if you use `$('.detailImg').load(function() {...`? I suspect that your images aren't loaded when your script runs, and therefore the width() and height() can't be determined properly. (If that is the problem, you may need to do further work, as the `load()` may not trigger for a cached image. See http://stackoverflow.com/questions/910727/jquery-event-for-images-loaded) — Matt Gibson, Jul 05 '11 at 10:18
as I remember, `$(document).ready` triggers when DOM is ready and image could not be loaded at this point. Try `$(window).load` — Igor Dymov, Jul 05 '11 at 10:18
sounds like it might be something to do with image caching. Perhaps you could test the approach from accepted answer here: https://stackoverflow.com/questions/728616 — Иван Грозный, Jul 05 '11 at 10:19

Matt Gibson · Accepted Answer · 2011-07-05T11:04:18.193

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.

Adding `height` and `width` to the `IMG` tag is the way! Thx! — danyolgiax, Jul 05 '11 at 12:17

score -1 · Answer 2 · answered Jul 05 '11 at 10:27

-1

Put your JS code just before the "body close tag".

Hope this helps.

answered Jul 05 '11 at 10:27

Deepak Kumar

632
4
15
27

Javascript resize big image only works after F5

2 Answers2