javascript not loading

Question

我正在使用此javascript调整我的网站上的图片。但是当我加载页面时，它似乎没有加载JavaScript。 这是我的javascript：

$(document).ready(function() { 
$("img.picture").each(function() { 
    var maxWidth = 100; // Max width for the image 
    var maxHeight = 100; // 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 
    } 
    $(this).show(); 
    }); 
}); 

这是我的头：

<link href="Styles/home/photo.css" rel="stylesheet" type="text/css" /> 
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
    <script src="ResizePicture.js" type="text/javascript"></script> 
    <script src="ChangePicture.js" type="text/javascript"></script> 

这就是所谓的ResizePicture.js 任何人在那里有一个想法，为什么不从一开始就加载？

Answer 1

在某些浏览器中，图像的宽度和高度可以在加载后获取。有两种方法来解决这个问题： -

define image width and height attrs in html 

或

改变你的代码： -

$(document).ready(function() { 
$("img.picture").each(function() { 
    $(this) 
    .show() 
    .css('visibility', 'hidden'); 
    $(this).load(function(){ 
    var maxWidth = 100; // Max width for the image 
    var maxHeight = 100; // 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 
    } 
    $(this).css('visibility', 'visible'); 
    }) 
    }); 
}); 

我宁愿做在服务器端脚本调整不是JS。

Answer 2

CSS规则不会更优雅吗？

img.picture { 
max-height: 100px; 
max-width: 100px; 
}