Js/jquery quickly get the true width and height of the picture

CSS helps designers to set the maximum width of an element max-width and maximum height max-height, to prevent the layout dislocation, I always put IMG, iframe, and embed tags set to max-width:100% so that on the small screen devices can still browse, But I still want to be able to get the original size that the image is not stretched and shrunk.

The JavaScript

Using some JavaScript listening functions, we can get the actual dimensions of the image:

The code is as follows	Copy Code
Myimage.addeventlistener (' onload ', function () { Console.log (' My width is: ', this.naturalwidth); Console.log (' My height is: ', this.naturalheight); });

I've never heard of Naturalwidth and Naturalheight. However, the value obtained is correct, but always should be in the page after loading to get the width of the picture, or always get 0.

On the internet to find a time to detect the picture wide-height method, the efficiency is very high. The specific code is as follows:

The code is as follows

Copy Code

Log Current time stamp var start_time = new Date (). GetTime (); Picture Address var img_url = ' img/bdlogo.png? ' +start_time; Creating objects var img = new Image (); Change the src of the picture IMG.SRC = Img_url; Timed execution gets a wide-high var check = function () { As long as either party is greater than 0 Indicates that the server has already returned a wide height if (img.width>0 | | img.height>0) { var diff = new Date (). GetTime ()-start_time; Document.body.innerHTML + = ' From:check:width: ' +img.width+ ', Height: ' +img.height+ ', Time: ' +diff+ ' ms ＇; Clearinterval (set); } }; var set = SetInterval (check,40);

jquery Way
The code is as follows

code is as follows

copy code

var _w = parseint ($ (window). width ());//Get the browser wide $ (". New_mess_c img"). each (function (i) { var img = $ (this); Var realwidth;//true Width var realheight;//true height //Here is the description, $ (" $ ("/* If you want to get the true width and height of the picture, three points must be noted 1, You need to create an image object such as $ (" 2, specify the SRC path of the picture 3, and make sure to perform the */ Realwidth in the. Load () function after the picture is loaded. This.width; Realheight = this.height; //If the true width is greater than the width of the browser, display if (realwidth>=_w) { $ (img). CSS ("width", "100%"). CSS ("height", "Auto"); } else{//If the width of the browser is less than the original size display $ (img). CSS ("width", realwidth+ ' px '). CSS ("height", realheight+ ' px '); } }); });