Javascript resize big image only works after F5
<p>I use this javascript to resize, to a max of 800px, a big (5Mb) image on a page:</p>

<pre><code> &lt;script type="text/javascript"&gt;
 $(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 &gt; 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 &gt; 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
         }
     });
 });
</code></pre>

<p> </p>

<p>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!</p>

<p>Where is the problem? Why this javascript only works when the page is refreshed?</p>
