JS get the picture width high method _javascript skill

This article shares a variety of JS to get the picture width and height of the method, and through an example of analysis, I hope that we have gained from it.

A simple way to get pictures

The time stamp behind the picture address is to avoid caching the
var img_url = ' upload/2013/13643608813441.jpg? ' +date.parse (New Date ());
 
Create Object
var img = new Image ();
 
Change the picture of src
img.src = img_url;
 
Print
alert (' Width: ' +img.width+ ', Height: ' +img.height);

The results are as follows:

The width is 0 of the result is normal, because the picture of the relevant data is not loaded before it's wide and high default is 0 so you can optimize!

Second, the onload after printing

The time stamp behind the picture address is to avoid caching the
var img_url = ' upload/2013/13643608813441.jpg? ' +date.parse (New Date ());
 
Create Object
var img = new Image ();
 
Change the picture of src
img.src = img_url;
 
Load Complete execution
img.onload = function () {
 //Print
 alert (' Width: ' +img.width+ ', Height: ' +img.height);
};

The results are as follows

Through the onload can get the picture of the wide height. 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 do not have to wait to trigger the onload, we want to be placeholders. So some people can also write this by caching.

Third, through the complete and the onload mixed use
to test the caching effect, note that the following test picture's URL does not add a timestamp

Picture Address
var img_url = ' upload/2013/13643608813441.jpg ';
 
Create Object
var img = new Image ();
 
Change the picture of src
img.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 of the cache triggers

Read the width of the picture from the cache needless to say, very convenient and fast, today we have to solve is not cached and fast compared to the onload faster way to get the picture of the width of the height. We often know that some pictures are not completely down, but they already have placeholders, and then 1.1 points of loading. Since there are placeholders that should be returned after the request for a picture resource server response. When the server responds and returns a wide range of data without triggering an event, such as the OnLoad event. And then a fourth method was created.

Four, through the regular 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:

Picture Address
var img_url = ' upload/2013/13643608813441.jpg? ' +date.parse (New Date ());
 
Create Object
var img = new Image ();
 
Change the picture of src
img.src = img_url;
 
Timed execution gets the wide high
var check = function () {
 Document.body.innerHTML + = '
from:check:width: ' +img.width+ ', Height: ' +img.height+ '
;
 
var set = SetInterval (check,40);
 
Load complete Gets the width high
img.onload = function () {
 Document.body.innerHTML = '
from:onload:width: ' +img.width+ ', Height: ' +img.height+ '
;
 
 Cancel the timing to get the width high
 clearinterval (set);

FireFox

IE7 8 9 10

Chrome

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

Record current timestamp
var start_time = new Date (). GetTime ();
 
Picture 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 picture of src
img.src = img_url;
 
Timed execution gets the wide high
var check = function () {
 //As long as either side is greater than 0
 //indicates that the server has returned the width 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);
 
Load completion Gets the width high
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 of the picture, the results of each browser can be seen by the rapid acquisition of image size almost all within 200 milliseconds, and the onload at least five seconds, the difference is that the rapid access to the picture is very practical.

Through a large number of examples to compare the JS to obtain a picture of the pros and cons of various methods, I hope that we need to seriously choose.