js method to get image width and height_javascript skills

This article shares a variety of JS methods to obtain the width and height of images, and analyzes them through examples. I hope you can gain something from them.

1. Simple way to obtain pictures

// 图片地址 后面加时间戳是为了避免缓存
var img_url = ‘upload/2013/13643608813441.jpg?'+Date.parse(new Date());
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 打印
alert('width:'+img.width+',height:'+img.height);

The results are as follows:

The result that the width and height are both 0 is normal, because the width and height of the image are 0 by default before the relevant data of the image is loaded, so it can be optimized like this!

2. Print after onload

// 图片地址 后面加时间戳是为了避免缓存
var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date());
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 加载完成执行
img.onload = function(){
 // 打印
 alert('width:'+img.width+',height:'+img.height);
};

The results are as follows

You can get the width and height of the image through onload. However, onloading larger images is usually slow and impractical. However, as long as the image is cached by the browser, there is almost no need to wait for the image to load to trigger onload. What we want is a placeholder. So some people can also write like this when getting it from the cache.

3. Use complete and onload together
In order to test the caching effect, please note that the URLs of the following test images do not include timestamps

// 图片地址
var img_url = 'upload/2013/13643608813441.jpg';
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 判断是否有缓存
if(img.complete){
 // 打印
 alert('from:complete : width:'+img.width+',height:'+img.height);
}else{
 // 加载完成执行
 img.onload = function(){
 // 打印
 alert('from:onload : width:'+img.width+',height:'+img.height);
 };
}

The first execution will always be triggered by onload

If you refresh again, it will almost always be cache triggered

Needless to say, reading the width and height of the image from the cache is very convenient and fast. What we are going to solve today is to get the width and height of the image in a faster and faster way than onload without cache. We often know that although some pictures are not completely downloaded, they already have placeholders and are then loaded bit by bit. Since there is a placeholder, it should be returned after requesting a response from the image resource server. But when the server responds and returns the width and height data, no event is triggered, such as the onload event. This gave rise to the fourth method

4. Obtain through timed loop detection
Look at the following example. In order to avoid reading data from the cache, each request is timestamped:

// 图片地址
var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date());
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 定时执行获取宽高
var check = function(){
 document.body.innerHTML += '
from:check : width:'+img.width+',height:'+img.height+'
';
};
 
var set = setInterval(check,40);
 
// 加载完成获取宽高
img.onload = function(){
 document.body.innerHTML += '
from:onload : width:'+img.width+',height:'+img.height+'
';
 
 // 取消定时获取宽高
 clearInterval(set);
};

FireFox

IE7 8 9 10

Chrome

Through the above tests, we found that the method of regularly detecting the width and height of the image is much faster than onload. The more lines printed, the longer the onload time is. If it is executed once every 40 milliseconds, the width of the image can be obtained in basically 100 milliseconds. High, Chrome already gets the data even on the first loop. From the analysis of the above data, we can actually judge in the timing function that as long as the width and height of the picture are greater than 0, it means that the correct picture width and height have been obtained. Let's mark the time to see how much time it takes to obtain the width and height through timing or onload.

// 记录当前时间戳
var start_time = new Date().getTime();
 
// 图片地址
var img_url = 'http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/1365477614755.jpg?'+start_time;
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 定时执行获取宽高
var check = function(){
 // 只要任何一方大于0
 // 表示已经服务器已经返回宽高
 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);
 
// 加载完成获取宽高
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 image. The execution results of each browser can be seen. The method of quickly obtaining the image size is almost within 200 milliseconds, and onload is at least five seconds. This huge difference shows that it is fast. It is very practical to get the width and height of the image.

Through a large number of examples, we have analyzed and compared the advantages and disadvantages of various methods of obtaining image width and height using js. I hope you will make a careful choice according to your needs.