javascript无法加载 [英] javascript not loading

问题描述

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

I am using this javascript that resizes my the pictures on my site. But it doesn't seem to load the javascript when I am loading the page. This is my 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 任何人都知道为什么它从一开始就不会加载?

It's called ResizePicture.js Anyone out there got an idea why it doesn't load from the start??

推荐答案

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

In some browsers image width and height can be fetched after it's been loaded. There are two ways to fix this issue:-

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在SERVER SIDE脚本中调整大小.

I would rather do resizing in SERVER SIDE script not with js.

这篇关于javascript无法加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！