Question

我使用此javascript调整大小，最大为800px，页面上的大（5Mb）图像：

 <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就可以告诉宽度和高度是否加载了图像。

Answer 2

听起来可能与图像缓存有关。也许你可以在这里测试接受答案的方法：Disable cache for some images

Answer 3

将您的JS代码放在“body close tag”之前。

希望这有帮助。

Javascript调整大图仅适用于F5之后

3 个答案: