Javascript resize big image 仅在 F5 后有效

Question

我使用此 javascript 将页面上的大 (5Mb) 图像调整为最大 800 像素:

 <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
         }
     });
 });

加载页面时，图像不会调整大小。 FireBug 控制台上没有错误。如果我尝试使用 F5 刷新页面，图像会调整大小!如果我尝试 Ctrl + F5，图像将以原始大小返回!

问题出在哪里？为什么这个 javascript 只在页面刷新时有效？

Answer 1

当您的 document.ready() 时，您的图片未加载运行。 document.ready()在加载 DOM 时触发，但此时图像可能仍在加载——尤其是当它们为 5MB 时!因此，图像高度和宽度在您的脚本运行时不可用。我猜它在 F5 上工作，因为图像仍然被缓存，所以加载速度足够快，以便在脚本运行时知道它们的尺寸。 Ctrl-F5 清除图像缓存，所以在那之后，您回到起点。

正如我在评论中指出的那样，使用 load()图像事件可能会有所帮助，但即便如此，有时也无法正确触发。例如，某些浏览器永远不会触发 load()已在浏览器缓存中的图像的事件(从技术上讲，它尚未加载...)

有几种不同的解决方法可以解决这个问题——Paul Irish's plugin可能有用；包括插件代码，然后使用类似的东西:

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

或者，如果您事先知道图像大小，只需在 img 中指定即可。元素，例如<img src="whatever" height="1200" width="1600" alt="whatever" /> .这样 jQuery 就可以判断图像是否已加载的宽度和高度。