How to solve the Google browser jquery can not get the size of the picture

The code is as follows:

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

The above code works fine in IE and firefox, but it may work in Google. The size is out of stock because the image hasn't been loaded yet.

The modification method is as follows:

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

I still have some time to share with you how jQuery dynamically changes the size of the image. The details are as follows.

When we want to display a number of images from the background that are not of size 1, in order to ensure the harmony of size 1 and scale, the display size of the image needs to be dynamically changed. Through searching, we can find the jQuery code for this function from the Internet as follows. This code keeps the size of the image within a range of 1, and if the original size of the image is greater than the max* value, the width of the image displayed will be the same.

Original code:

$(document).ready(function() {
   $('.post img').each(function() {
   var maxWidth = 100; //  Maximum image width 
   var maxHeight = 100;  //  Maximum height of image 
   var ratio = 0; //  scaling 
   var width = $(this).width();  //  Actual width of picture 
   var height = $(this).height(); //  Actual height of picture 
   //  Check if the image is too wide 
   if(width > maxWidth){
     ratio = maxWidth / width;  //  Calculate the scale 
     $(this).css("width", maxWidth); //  Set the actual display width 
     height = height * ratio;  //  Calculate the height after constant scaling  
     $(this).css("height", height); //  Set the height after constant scaling 
   }
   //  Check if the picture is too high 
   if(height > maxHeight){
     ratio = maxHeight / height; //  Calculate the scale 
     $(this).css("height", maxHeight);  //  Set the actual display height 
     width = width * ratio;  //  Calculate the height after constant scaling 
     $(this).css("width", width * ratio);  //  Set the height after constant scaling 
   }
 });
 });

In my js code, I've done the same. However, when testing the effect in different browsers, it was found that the writing method could not adapt to chrome browser (chrome version 10.0.648.204), and bug would produce the image with the original size. Later, the $('.post img').each () code was wrapped with the $(window).load () method, which solved the problem of incorrect display of chrome browser. So why is bug generated in chrome browser, and what's the difference between $(document).ready and $(window).load?

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

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

The above is the entire class of the article, about the above code, put in my page to get the height of the image will report an error, tips do not provide width method

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

Therefore, 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 how I share with you to solve Google browser jquery can not get the size of the picture and jQuery dynamic change the size of the picture display method, I hope you like, more hope friends please continue to pay attention to this site, thank you.