Javascript tips-js tutorial

This article mainly introduces js's method of obtaining image width and height. It is actually to prepare for layout in advance to quickly obtain the image width and height, for more information about how to use js to retrieve image width and height, see this article.

I. Simple Image Retrieval Methods

// The image address is followed by a timestamp to avoid caching var img_url = 'upload/2013/13643608813441 .jpg? '+ Date. parse (new Date (); // create the object var img = new Image (); // change the srcimg of the Image. src = img_url; // print alert ('width: '+ img. width + ', height:' + img. height );

The result is as follows:

If the width and height are both 0, the result is normal, because the image-related data is not loaded before its width and height is 0 by default, so it can be optimized like this!

Ii. Printing after onload

// The image address is followed by a timestamp to avoid caching var img_url = 'upload/2013/13643608813441 .jpg? '+ Date. parse (new Date (); // create the object var img = new Image (); // change the srcimg of the Image. src = img_url; // The load is complete and the execution is img. onload = function () {// print alert ('width: '+ img. width + ', height:' + img. height );};

The result is as follows:

Onload can be used to obtain the image width and height. However, an onload larger image is usually relatively slow and not practical. However, as long as the image is cached by the browser, loading the image will trigger onload without waiting. What we need is a placeholder. Therefore, some users can write this information through caching.

3. Hybrid use of complete and onload
To test the cache effect, note that no timestamp is added to the URLs of the following images.

// Image URL var img_url = 'upload/2013/13643608813441 .jpg '; // create the object var img = new Image (); // change the srcimg of the Image. src = img_url; // determines whether cache if (img. complete) {// print alert ('from: complete: width: '+ img. width + ', height:' + img. height);} else {// Load completed execution img. onload = function () {// print alert ('from: onload: width: '+ img. width + ', height:' + img. height );};}

The first execution is always triggered by onload.

Refresh again, almost allCache triggerNow

It is convenient and quick to read images from the cache. What we need to solve today is to get the image width and height faster without caching. We often know that some images are not completely down, but there are placeholders first, and then 1.1 points are loaded. Since there is a placeholder, it should be returned after the image resource server responds. When can the server respond and return data with a high width without triggering an event, such as an onload event. This gave birth to the fourth method.

4. Obtain through timed cyclic Detection
Take a look at the following example. To avoid reading data from the cache, each request has a timestamp:

// Image URL var img_url = 'upload/2013/13643608813441 .jpg? '+ Date. parse (new Date (); // create the object var img = new Image (); // change the srcimg of the Image. src = img_url; // obtain the width and height var check = function () {document. body. innerHTML + = 'from: check: width: '+ img. width + ', height:' + img. height + '';}; var set = setInterval (check, 40); // obtain the width and height of img after loading. onload = function () {document. body. innerHTML + = 'from: onload: width: '+ img. width + ', height:' + img. height + ''; // get the width and height clearInterval (set );};

FireFox

IE7 8 9 10

Chrome

Through the above tests, we found that the method of regular detection of image width is much faster than onload. The more lines printed, the longer the onload time, the more time it will be executed in 40 milliseconds, the width and height of the image can be obtained within 100 milliseconds. chrome even obtained data during the first cycle. From the above data, we can use the timing function to determine that if the image width and height are greater than 0, the correct image width and height are obtained. We set the time to see how long it takes to get the width and height through regular acquisition or onload.

// Record the current timestamp var start_time = new Date (). getTime (); // image address var img_url = 'HTTP: // B .zol-img.com.cn/#/bizhi/image/2/2560x1600/1365477614755.jpg? '+ Start_time; // create object var img = new Image (); // modify the srcimg of the Image. src = img_url; // obtain the width and height var check = function () {// if either party is greater than 0 // indicates that the server has returned the width and 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 ); // obtain the width and height of img after loading. 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 image. The result of each browser can be seen that the method of quickly obtaining the image size is almost within 200 milliseconds, while onload is at least five seconds, the big difference indicates that it is very practical to quickly obtain the image width and height.

By analyzing a large number of instances, we have compared the advantages and disadvantages of js methods for obtaining image width and height. We hope you can make a choice based on your needs.