자바 스크립트가로드되지 않습니다.

Question

내 사이트의 사진 크기를 조절하는 자바 스크립트를 사용하고 있습니다. 하지만 그것은 페이지를로드 할 때 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(); 
    }); 
}); 

그리고 이것은 내 헤더 : 그것은 ResizePicture.js

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

을 불렀다 거기 사람이 처음부터로드되지 않는 이유를 생각이있어?

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