51CTO推荐专题：JavaScript学习笔记 有问有答

一段典型的使用预加载获取图片大小的例子：

var imgLoad = function (url, callback) {  
var img = new Image();  
 
img.src = url;  
if (img.complete) {  
callback(img.width, img.height);  
} else {  
img.onload = function () {  
callback(img.width, img.height);  
img.onload = null;  
};  
};  
 
}; 

可以看到使用onload的方式必须等待图片加载完毕，其速度不敢恭维。

web应用程序区别于桌面应用程序，响应速度才是最好的用户体验。如果想要速度与优雅兼得，那就必须提前获得图片尺寸，如何在图片没有加载完毕就能获取图片尺寸?

十多年的上网经验告诉我：浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕，并且这里大部分的图片都是没有预设width与height属性的，因为浏览器能够获取图片的头部数据。基于此，只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。

实现代码：

var imgReady = function (url, callback, error) {  
var width, height, intervalId, check, div,  
img = new Image(),  
body = document.body;  
 
img.src = url;  
 
// 从缓存中读取  
if (img.complete) {  
return callback(img.width, img.height);  
};  
 
// 通过占位提前获取图片头部数据  
if (body) {  
div = document.createElement('div');  
div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';  
div.appendChild(img)  
body.appendChild(div);  
width = img.offsetWidth;  
height = img.offsetHeight;  
 
check = function () {  
if (img.offsetWidth !== width || img.offsetHeight !== height) {  
clearInterval(intervalId);  
callback(img.offsetWidth, img.clientHeight);  
img.onload = null;  
div.innerHTML = '';  
div.parentNode.removeChild(div);  
};  
};  
 
intervalId = setInterval(check, 150);  
};  
 
// 加载完毕后方式获取  
img.onload = function () {  
callback(img.width, img.height);  
img.onload = img.onerror = null;  
clearInterval(intervalId);  
body && img.parentNode.removeChild(img);  
};  
 
// 图片加载错误  
img.onerror = function () {  
error && error();  
clearInterval(intervalId);  
body && img.parentNode.removeChild(img);  
};  
 
}; 

是不是很简单?这样的方式获取摄影级别照片尺寸的速度往往是onload方式的几十多倍，而对于web普通(800×600内)浏览级别的图片能达到秒杀效果。

好了，请观赏令人愉悦的 DEMO ，通过测试的浏览器：Chrome、Firefox、Safari、Opera、IE6、IE7、IE8。
 

原文链接：http://www.planeart.cn/?p=1121

【编辑推荐】

1. 示例：JavaScript中的后续传递风格
2. JavaScript中同名标识符优先级详解
3. 浅析JavaScript继承方式
4. 如何编写高质量的JavaScript代码
5. 通过JavaScript或PHP检测Android设备