Js to get the image width and height, js to get the image

Source: Internet
Author: User

Js to get the image width and height, js to get the image

This article shares a variety of js methods to get high image width and analyzes them through examples. I hope you will gain some benefits.

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.