Implementation ideas and code for jQuery to dynamically change image display size (modified version)_jquery

When we want to display several pictures of different sizes transmitted from the background, in order to ensure the consistency of the picture size and the coordination of the proportions, we need to dynamically change the picture display size. Through search, we can find the jQuery code that implements this function from the Internet as follows. This code can keep the size of the image within a certain range. If the original size of the image is greater than the max* value, the width of the displayed images will be equal.

Original code:

Copy code The code is as follows:

$(document).ready(function() {
$('.post img').each(function() {
var maxWidth = 100; // Maximum image width
var maxHeight = 100; // Maximum image height
var ratio = 0 ; // Scaling ratio
var width = $(this).width(); // Actual width of picture
var height = $(this).height(); // Actual height of picture

// Check whether the image is super wide
if(width > maxWidth){
ratio = maxWidth / width; // Calculate the scaling ratio
$(this).css("width", maxWidth); // Set the actual display width. The height of
}

// Check whether the picture is super high
if(height > maxHeight){
ratio = maxHeight / height; // Calculate the scaling ratio
$(this ) .css ("height", maxheight); // Set the actual display height
width = width * ratio; // The height of the proportion of calculations
$ (this) .css ("width" ("width" width * ratio); // Set the height after scaling
}
});
});

I also use this writing method in my js code. However, when testing the effect on different browsers, it was found that this writing method cannot be adapted to the Chrome browser (chrome version number is 10.0.648.204), and will cause a bug where the image is displayed in its original size. Later, the code of $('.post img').each() was wrapped with the $(window).load() method, which solved the problem of incorrect display in the Chrome browser. So why does a bug occur in the Chrome browser, and what is the difference between $(document).ready and $(window).load?

It turns out that the document ready event starts executing when the HTML document is loaded and the DOM is ready, even if the image resources have not been loaded yet. The window load event is executed slightly later. It starts execution after the entire page, including frames, objects and images, is loaded. From this difference, we can analyze that when the Chrome browser does not use the $(window).load() method to process images, the execution order of the js code for loading images and dynamically changing images is uncertain.

Regarding the above code, when I put it into my page, an error will be reported when getting the height of the image, indicating that the width method is not provided

Copy code The code is as follows:

var width = $(this).width(); // Actual width of the image

var height = $(this).height(); // Actual height of the image

So the modified code is as follows:

Copy code The code is as follows:

jQuery(window).load(function () {
            jQuery("div.product_info img").each(function () {
                DrawImage(this, 680, 1000);
            });
        });
        function DrawImage(ImgD, FitWidth, FitHeight) {
            var image = new Image();
            image.src = ImgD.src;
            if (image.width > 0 && image.height > 0) {
                if (image.width / image.height >= FitWidth / FitHeight) {
                    if (image.width > FitWidth) {
                        ImgD.width = FitWidth;
                        ImgD.height = (image.height * FitWidth) / image.width;
                    } else {
                        ImgD.width = image.width;
                        ImgD.height = image.height;
                    }
                } else {
                    if (image.height > FitHeight) {
                        ImgD.height = FitHeight;
                        ImgD.width = (image.width * FitHeight) / image.height;
                    } else {
                        ImgD.width = image.width;
                        ImgD.height = image.height;
                    }
                }
            }
        }