How to solve the problem that jquery cannot obtain the size of the image in Google Chrome_jquery

The code is as follows:

$(document).ready(function(){ 
 var img_h=$img.height();  
 var img_w=$img.width();  
}) 

The above code has no problem in IE and Firefox, but it may cause problems in Google. The reason why the size is out of stock is because the image has not been loaded.

The modification method is as follows:

$(document).ready(function(){ 
 $img.load(function(){  
  var img_h=$img.height();  
  var img_w=$img.width();  
 }) 
}) 

There is still some time, so I will share with you How to dynamically change the image display size with jQuery. The details are as follows.

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:

$(document).ready(function() {
   $('.post img').each(function() {
   var maxWidth = 100; // 图片最大宽度
   var maxHeight = 100;  // 图片最大高度
   var ratio = 0; // 缩放比例
   var width = $(this).width();  // 图片实际宽度
   var height = $(this).height(); // 图片实际高度
   // 检查图片是否超宽
   if(width > maxWidth){
     ratio = maxWidth / width;  // 计算缩放比例
     $(this).css("width", maxWidth); // 设定实际显示宽度
     height = height * ratio;  // 计算等比例缩放后的高度 
     $(this).css("height", height); // 设定等比例缩放后的高度
   }
   // 检查图片是否超高
   if(height > maxHeight){
     ratio = maxHeight / height; // 计算缩放比例
     $(this).css("height", maxHeight);  // 设定实际显示高度
     width = width * ratio;  // 计算等比例缩放后的高度
     $(this).css("width", width * ratio);  // 设定等比例缩放后的高度
   }
 });
 });

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.

-------------------------------------------------- -----

The above is the entire content of the article. Regarding the above code, when it is placed on my page to obtain the height of the image, an error will be reported, indicating that the width method is not provided

var width = $(this).width();  // 图片实际宽度
var height = $(this).height(); // 图片实际高度

So the modified 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;
          }
        }
      }
    }

The above content is what I share with you how to solve the problem that jquery cannot obtain the size of the image under Google Chrome and how jQuery dynamically changes the display size of the image. I hope you will like it, and I also hope that friends will continue to pay attention to this site. Thank you.