Javascript Not Loading

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(

Solution 1:

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

or

change your code to:-

$(document).ready(function () {
$("img.picture").each(function () {
    $(this)
     .show()
     .css('visibility', 'hidden');
    $(this).load(function(){
    var maxWidth = 100; // Max width for the imagevar maxHeight = 100;    // Max height for the imagevar ratio = 0;  // Used for aspect ratiovar width = $(this).width();    // Current image widthvar height = $(this).height();  // Current image height// Check if the current width is larger than the maxif (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 maxif (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');
    })
  });
 });

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

Solution 2:

Wouldn't a CSS rule be more elegant?

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