JQuery dynamic change of image display size of modified version of the realization of ideas and code

When we want to display several pictures with different sizes in the background, we need to dynamically change the size of the pictures in order to ensure the consistency of the size of the pictures and the coordination of the proportions. Through the search, we can find the following jQuery code to implement this function. This code keeps the size of the image within a certain range, and if the original size of the image is greater than the value of Max *, the width of the image will be the same.

Original code:

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

     //Check if the picture is too wide
     if(width > maxWidth){
         ratio = maxWidth / width;   //Calculate the scaling
         $(this).css("width", maxWidth); //Set the actual display width
         height = height * ratio;    //Calculate the height of the scale
         $(this).css("height", height);  //Set the height after scaling
     }

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

In my js code, I've also taken this approach. However, when testing different browser effects, it was found that this did not work for chrome (chrome version 10.0.648.204), resulting in a bug where the image was displayed in full size. The $('.post img').each() code was later wrapped in the $(window).load() method, which solved the problem of incorrect display in chrome. So why are there bugs in chrome, and what's the difference between $(document).ready and $(window).load?

Originally, the document ready event was executed when the HTML document was loaded, that is, when the DOM was ready, even if the image resource had not been loaded. The window load event executes a little later, after the entire page, including frames, objects, and images, has been loaded. From this difference, it can be analyzed that when chrome browser does not use the $(window).load() method for images, the js code execution order of images loading and dynamically changing images is uncertain.

As for the above code, when I put it on my page, I will report an error when I get the height of the image. The error is that the width method is not provided

var width = $(this).width();    //Actual picture width
     var height = $(this).height();  //Actual height of picture

Therefore, the code is modified 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;
                    }
                }
            }
        }