How to solve the Google browser under jquery can't 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 in IE and Firefox is not a problem, but there may be problems in Google, the reason for the size of the goods is not loaded because the picture is not finished.

Here's how to modify it:

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

　　

There is a bit of time, and then we will share with you how jQuery dynamically changes the size of the image display, as described below.

When we want to show the background of a number of different sizes of images, in order to ensure the image size consistency and coordination of proportions, you need to dynamically change the image display size. By searching, we can find the jquery code that implements this functionality from the Web as follows. This code can keep the size of the picture within a certain range, if the original size of the picture is greater than the max* value, the displayed image width is equal.

Original code:

$ (document). Ready (function () {   $ ('. Post img '). each (function () {   var maxWidth = 100;//Picture Max width   var maxheight = +;  Picture maximum height   var ratio = 0;//scale   var width = $ (this). width ();  The actual width of the picture   is var = $ (this). Height ();////////////   Check if the picture is ultra wide   if (Width > maxWidth) {     ratio = MaxWidth /width;  Calculates the zoom ratio     $ (this). CSS ("width", maxWidth);//Set actual display width     height = height * ratio;  Calculates the height of the equal scale after     $ (this). CSS ("height", height),//Set the altitude after scaling}//   Check if the picture is superelevation   if (height > MaxHeight) {     ratio = maxheight/height;//Calculate Scaling     $ (this). CSS ("height", maxheight);  Set the actual display height     width = width * ratio;  Calculates the height of the equal scale after     $ (this). CSS ("width", width * ratio);  Set the height of the proportional scale   }}); });

　　

In my JS code , I also took this kind of notation. However, when testing the results in different browsers, it is found that this type of writing does not fit into chrome (the Chrome version number is 10.0.648.204), which produces a bug that shows the image in its original size. Later put $ ('. Post img '). The code for each () is packaged with the $ (window). Load () method, which solves the problem that the Chrome browser does not display correctly. Why is there a bug in the Chrome browser and $ (document). Ready and $ (window). What's the difference between the load?

The original document ready event is executed when the HTML document is loaded, which is the DOM, even though the picture resource has not yet been loaded. The window Load event executes slightly later, and it is executed only after the entire page includes frames, objects, and images are loaded. From this difference can be analyzed in the Chrome browser in the picture does not adopt the $ (window) method when processing, picture loading and dynamically changing the image of the JS code execution sequence is uncertain.

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

Above is the entire class of the article, about the above code, put in my page when the height of the image will be error, indicating that the width method is not provided

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) { C9/>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 give you to share how to solve the Google browser jquery can not get the size of the image and jquery dynamic change the size of the image display method, I hope you like, but also hope that friends continue to pay attention to this site, thank you.

How to solve the Google browser under jquery can't get the size of the picture