How to get image width and height in js

JS method to obtain image width and height: 1. Print after onload; 2. Use complete and onload mixed together; 3. Obtain through timed loop detection, the code is [from:check : width:' img .width ',height:' img.heig].

The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, DELL G3 computer.

js method of obtaining image width and height:

1. Simple method of obtaining images

// 图片地址 后面加时间戳是为了避免缓存
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 before the relevant data of the image is loaded, its width and height default to 0, so it can be optimized like this!

2. After onload, print

// 图片地址 后面加时间戳是为了避免缓存
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);
};

and the result is as follows

You can get the picture through onload Wider and taller. However, onloading larger images is usually slower 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. Mix complete and onload together

In order to test the caching effect, please note that the URLs of the following test images do not add 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 time it is executed, it will always be triggered by onload

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

From Needless to say, it is very convenient and fast to read the width and height of the image in the cache. 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. So the fourth method was born

4. Obtain through timed loop detection

Look at the following example. In order to avoid reading data from the cache, each request With timestamp:

// 图片地址
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);
};

Recommended study: "JavaScript Video Tutorial"

The above is the detailed content of How to get image width and height in js. For more information, please follow other related articles on the PHP Chinese website!