How to solve the problem that jquery cannot get the image size in Google's browser _ jquery

This topic describes the problem that jquery cannot be used to obtain the image size in Google's browser, but it can be obtained normally in IE and Firefox, and of course it cannot be used to obtain the image size at any time, the following describes how to solve this problem. The code is as follows:

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

The above code is no problem in IE and Firefox, but problems may occur in Google. the reason why the image is out of stock is because it 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();   }) }) 

Another time, let's share with you how jQuery dynamically changes the image size. The details are as follows.

When we want to display several images of different sizes in the background, we need to dynamically change the image display size to ensure the consistency of the image size and the coordination of the proportion. By searching, we can find the following jQuery code to implement this function on the Internet. This code can keep the image size within a certain range. if the original size of the image is greater than the max * value, the displayed image width is equal.

Original code:

$ (Document ). ready (function () {$ ('. post img '). each (function () {var maxWidth = 100; // maximum image width var maxHeight = 100; // maximum image height var ratio = 0; // zoom ratio var width = $ (this ). width (); // The actual width of the image var height = $ (this ). height (); // actual image height // check whether the image is too wide if (width> maxWidth) {ratio = maxWidth/width; // calculate the zoom ratio (this).css ("width ", maxWidth); // set the actual display width height = height * ratio; // calculate the scaled height (this).css ("height", height ); // set the height after proportional scaling} // check whether the image is super high if (height> maxHeight) {ratio = maxHeight/height; // calculate the zoom ratio (this%.css ("height ", maxHeight); // set the actual display height width = width * ratio; // calculate the scaled height (this).css ("width", width * ratio) after proportional scaling ); // set the height after proportional scaling }});});

This method is also used in my js code. However, when different browsers test the results, it is found that this method cannot adapt to the chrome browser (chrome version number is 10.0.648.204), which will generate a bug that the images are displayed in the original size. Later, we wrapped $ ('. post img'). each () code in the $ (window). load () method to solve the problem of incorrect display in chrome. So why is a bug in chrome, and what is the difference between $ (document). ready and $ (window). load?

In the past, the document ready event was loaded in the HTML document, that is, the DOM was ready and executed, even if the image resources were not loaded in. The window load event is executed later. it is executed only after the entire page, including frames, objects, and images, is loaded. From this difference, we can see that when the chrome browser does not use the $ (window). load () method for image processing, the execution sequence of the js code for image loading and dynamic changes is uncertain.

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

The above is all the class content of the article. an error will be reported when the above code is put on my page to get the image height, prompting that the width method is not provided

Var width = $ (this). width (); // The actual width of the image var height = $ (this). height (); // the actual height of the image

The modified code is as follows:

jQuery(window).load(function () {      jQuery("p.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 for you to share with us how to solve the problem that jquery cannot obtain the image size in Google's browser and how jQuery dynamically changes the image display size, I also hope that my friends will continue to pay attention to this site. thank you.