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