How to solve the Google browser under jquery cannot get picture size _jquery

The code is as follows:

$ (document). Ready (function () { 
 var img_h= $img. Height ();  
 var img_w= $img. Width ();  

The above code in IE and Firefox is not a problem, but there may be problems in Google, the reason is not the size of the goods because the picture is not loaded.

The modification method is as follows:

$ (document). Ready (function () { 
 $img. Load (function () {  
  var img_h= $img. Height ();  
  var img_w= $img. Width ();  
 }) 

Still a little time, and then to share the jquery dynamic Change the image display size of the method, the details are as follows.

When we want to show the background of a number of different sizes of pictures, in order to ensure the image size consistency and the proportion of coordination, the need to dynamically change the picture display size. By searching, we can find the jquery code to implement this function from the Internet as follows. This code can keep the size of the picture to a certain extent, if the original size of the picture is greater than the max* value, the displayed picture width is equal.

Original code:

 $ (document). Ready (function () {$ ('. Post img '). each (function () {var maxwidth = 100;  Picture Max width var maxheight = 100; Picture Max height var ratio = 0;  Zoom ratio var width = $ (this). width (); Picture actual width var height = $ (this). Height ();  Picture actual height//check whether the picture is super wide if (Width > maxwidth) {ratio = Maxwidth/width; Calculate the zoom ratio $ (this). CSS ("width", maxwidth);  Set actual display width height = height * ratio; Calculates the height of equal proportional scaling $ (this). CSS ("height", height); Set the height of proportional scaling}//Check whether the picture is super high if (height > maxheight) {ratio = Maxheight/height;//Calculate Scaling $ (this). C  SS ("height", maxheight);  Set the actual display height width = width * ratio;  Calculates the height of the proportional scaling $ (this). CSS ("width", width * ratio);
 Set equal proportional scaling height}}); 
});

In my JS code, also adopted this writing. However, in different browsers to test the effect, found that this type of writing can not adapt to the Chrome browser (Chrome version number is 10.0.648.204), will produce a picture of the original size of the bug displayed. The code for the $ ('. Post img '), each (), was then packaged with the $ (window). Load () method, which solves the problem that the Chrome browser is not displaying correctly. So why is there a bug in the Chrome browser, and $ (document). Ready and $ (window). What's the difference between load?

The original document ready event was started when the HTML document was loaded, and the DOM was ready, even though the picture resources had not yet been loaded in. The window Load event executes a little later, and it starts after the entire page includes frames, objects, and images are loaded. From this distinction can be analyzed in the Chrome browser for the picture does not use $ (window). When the load () method is processed, the order of the JS code to load and dynamically change the picture is uncertain.

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

The above is the entire class of the article, about the above code, placed in my page when you get the picture height will be an error, the hint does not provide a width method

var width = $ (this). width ();  Picture actual width
var height = $ (this). Height ();//Picture actual height

So modify the code 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 I share to you how to solve Google browser jquery can't get picture size and jquery dynamic change Picture display size method, hope you like, more hope friends please continue to pay attention to this site, thank you.