本文介绍了如何使用JavaScript代码获取网页中图片的实际宽度和高度，包括直接读取属性、通过事件监听等方式实现非阻塞获取。
本段落分享了几种获取图片宽高的JavaScript方法，并通过实例进行分析。
一、简陋的获取方式
为避免缓存影响，可以给图片地址加上时间戳：
```javascript
var img_url = upload201313643608813441.jpg? + Date.parse(new Date());
```
然后创建一个`Image`对象并设置其`src`属性为上述的URL。尝试立即获取图片宽度和高度，但这种方法通常会失败，因为此时图片可能还未完成加载：
```javascript
var img = new Image();
img.src = img_url;
alert(width: + img.width + , height: + img.height);
```
结果通常是宽高都是0。
为解决上述问题，可以使用`onload`事件，在图片完全加载后获取其尺寸。例如：
```javascript
var img_url = upload201313643608813441.jpg? + Date.parse(new Date());
var img = new Image();
img.src = img_url;
img.onload = function() {
alert(width: + img.width + , height: + img.height);
};
```
另一种方法是检查`complete`属性，以判断图片是否已从缓存中加载：
```javascript
var img_url = upload201313643608813441.jpg;
var img = new Image();
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);
};
}
```
对于未缓存的图片，可以使用定时器来不断检测其尺寸是否已更新：
```javascript
var img_url = upload201313643608813441.jpg? + Date.parse(new Date());
var img = new Image();
img.src = img_url;
function check() {
if (img.width > 0 && img.height > 0) {
clearInterval(set);
document.body.innerHTML += from:check : width: + img.width + , height: + img.height;
} else {
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;
};
```
这种方法在Firefox、IE7-10和Chrome等浏览器中表现良好，能更快地获取到图片的初始尺寸。然而，过度使用定时器可能会影响性能。
最佳实践通常是利用`onload`事件或结合检查缓存来优化加载过程，并根据具体需求选择合适的检测间隔以减少资源消耗。
5星
