JS Quick Method of obtaining picture width and height

Quickly get the width of the picture is in order to pre-make layout-style layouts to prepare, by quickly obtaining a picture of the width of the method than the OnLoad method to save a lot of time, even more than a minute is possible, and this method is applicable to mainstream browsers including IE low-version browser.
A simple way to get pictures

The timestamp after the image address is added to avoid caching var Img_url = ' http://www.qttc.net/static/upload/2013/13643608813441.jpg? ' +date.parse (New Date ()); Create object var img = new Image (); Change the image of srcimg.src = Img_url; Print alert (' Width: ' +img.width+ ', Height: ' +img.height ');

The results are as follows:

The width and height are 0 of the result is normal, because the image of the relevant data is not loaded before its width and height default is 0 so can be so optimized!

Second, the onload after the printing

The timestamp after the image address is added to avoid caching var Img_url = ' http://www.qttc.net/static/upload/2013/13643608813441.jpg? ' +date.parse (New Date ()); Create object var img = new Image (); Change the image of srcimg.src = Img_url; Load Complete Execution img.onload = function () {    //Print    alert (' Width: ' +img.width+ ', Height: ' +img.height);};

The results are as follows

The width of the image can be obtained by the onload. But the onload larger figure is usually slow, not practical, but as long as the picture is cached by the browser, then the picture loading almost without waiting to trigger onload, we want a placeholder. So some people get through the cache and can write like this.

Iii. mixing with onload through complete
To test the cache effect, note that the URL of the following test picture is not timestamp

Image address var img_url = ' http://www.qttc.net/static/upload/2013/13643608813441.jpg '; Create object var img = new Image (); Change the image of srcimg.src = Img_url; Determine if there is a cache if (img.complete) {    //Print    alert (' from:complete:width: ' +img.width+ ', Height: ' +img.height ');} else{    //load complete execution    img.onload = function () {        //Print        alert (' from:onload:width: ' +img.width+ ', Height: ' + img.height);}    ;}

The first execution, always the OnLoad trigger

You refresh again, almost all cache triggers.

Read the picture from the cache the width of the height needless to say, very convenient and fast, today we have to solve is not cached and fast compared to onload faster way to get the width of the picture. We often know that some images, although not completely down, have placeholders and then load 1.1 points. Since there is a placeholder that should be returned after requesting a response from the picture resource server. When the server responds and returns a wide data without triggering an event, such as the OnLoad event. So the fourth method was spawned.

Four, through the timing cycle detection to obtain
Take a look at the following example, in order to avoid reading data from the cache, each request has a timestamp:

Image address var img_url = ' http://www.qttc.net/static/upload/2013/13643608813441.jpg? ' +date.parse (New Date ()); Create object var img = new Image (); Change the image of srcimg.src = Img_url; Timed execution gets a wide high var check = function () {    Document.body.innerHTML + = ' from:check:width: ' +img.width+ ', Height: ' + Img.height+ ';}; var set = SetInterval (check,40); Load complete get width high img.onload = function () {    Document.body.innerHTML + = ' from:onload:width: ' +img.width+ ', Height: ' + Img.height+ ";     Cancel the timing to get the wide height    clearinterval (set);};

FireFox

IE7 8 9 10

Chrome

Through the above tests, we found that the time to detect the image width is much faster than onload, the more lines printed to indicate that the onload time is longer, 40 milliseconds to execute once, the basic 100 milliseconds to obtain the width of the picture, Chrome even in the first cycle when the data has been obtained. From the above data to analyze, in fact, we can judge in the timing function as long as the width of the picture is greater than 0 indicates that the image has been obtained the correct width of the height. Let's take the time to see how much time it takes to get a wide height or the onload by timing.

Record current timestamp var start_time = new Date (). GetTime (); Image address var img_url = ' http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/1365477614755.jpg? ' +start_time; Create object var img = new Image (); Change the image of srcimg.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 returned a wide high    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); Loading complete Gets the wide Img.onload = function () {    var diff = new Date (). GetTime ()-start_time;    Document.body.innerHTML + = ' from:onload:width: ' +img.width+ ', Height: ' +img.height+ ', Time: ' +diff+ ' Ms ';};

FireFox:

Ie

Chrome

This is a 2560 * 1600 size picture, the browser execution results can be seen by the rapid acquisition of image size is almost within 200 milliseconds, and onload at least five seconds or more, the difference between the big picture is very useful to quickly get the image width.

JS Quick Method of obtaining picture width and height