JavaScript图片预加载技术详解：快速获取尺寸与性能优化

JavaScript图片预加载技术详解：快速获取尺寸与性能优化

本文重点介绍的预加载技术，旨在利用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方式的局限性

从上述代码可以看出，依赖onload事件必须等待图片完全加载完毕才能执行回调，这种方式的速度表现往往不尽如人意。

Web应用程序与桌面应用程序不同，响应速度是提升用户体验的关键因素。若希望兼顾速度与优雅，就必须提前获取图片尺寸。那么，如何在图片尚未完全加载时就能获知其尺寸呢？

基于DOM占位状态的快速尺寸检测方案

基于多年的上网经验可以发现，浏览器在加载图片时，通常会先预留一块显示区域，随后再逐步渲染完整图像。大多数图片并未预设width和height属性，但浏览器能够读取图片的头部数据。基于这一原理，只需使用JavaScript定时检测图片的尺寸状态，即可判断图片尺寸是否就绪。

优化后的imgReady实现代码

改进后的实现代码如下（2011-03-11更新）：

2011-03-12 更新：

 
/*! 
* img ready v0.3
* http://www.planeart.cn/?p=1121
* TangBin - MIT Licensed
*/ 
// 图片头数据加载就绪事件
// @param {String} 图片路径
// @param {Function} 获取尺寸的回调函数 (参数1接收width；参数2接收height)
// @param {Function} 加载错误的回调函数 (可选)
(function () {
var list = [], intervalId = null,
tick = function () {
var i = 0;
for (; i < list.length; i++) {
list[i].end ? list.splice(i--, 1) : list[i]();
}; 
!list.length && stop();
}, 
stop = function () {
clearInterval(intervalId);
intervalId = null;
}; 
this.imgReady = function (url, callback, error) {
var check, end, width, height, offsetWidth, offsetHeight, div,
accuracy = 1024,
doc = document,
container = doc.body || doc.getElementsByTagName('head')[0],
img = new Image();
img.src = url;
if (!callback) return img;
// 如果图片被缓存，则直接返回缓存数据
if (img.complete) return callback(img.width, img.height);
// 向页面插入隐秘图像，用来监听图片是否占位
div = doc.createElement('div');
div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
div.appendChild(img)
container.appendChild(div);
width = img.offsetWidth;
height = img.offsetHeight;
// 完全加载完毕的事件
img.onload = function () {
end();
callback(img.width, img.height);
}; 
// 加载错误后的事件
img.onerror = function () {
end();
error && error();
}; 
// 检测图片是否已经占位
check = function () {
offsetWidth = img.offsetWidth;
offsetHeight = img.offsetHeight;
if (offsetWidth !== width || offsetHeight !== height || offsetWidth * offsetHeight > accuracy) {
end();
callback(offsetWidth, offsetHeight);
}; 
}; 
check.url = url;
// 操作结束后进行清理
// 删除元素与事件，避免IE内存泄漏
end = function () {
check.end = true;
img.onload = img.onerror = null;
div.innerHTML = '';
div.parentNode.removeChild(div);
}; 
// 将检测图片是否占位的函数加入定时器列队定期执行
// 同一图片只加入一个检测器
// 无论何时只允许出现一个定时器，减少浏览器性能损耗
!check.end && check();
for (var i = 0; i < list.length; i ++) {
if (list[i].url === url) return;
}; 
if (!check.end) {
list.push(check);
if (!intervalId) intervalId = setInterval(tick, 150);
}; 
}; 
})(); 

性能优势与浏览器兼容性测试

这种方法实现简单，且获取摄影级别照片尺寸的速度通常是onload方式的几十倍；对于普通浏览级（800×600以内）的图片，甚至能达到秒级响应的效果。

欢迎体验演示DEMO： http://demo.jb51.net/js/2011/imgready/

（已通过测试的浏览器包括：Chrome、Firefox、Safari、Opera、IE6、IE7、IE8）

作者：唐斌