再谈javascript图片预加载技术

再谈javascript图片预加载技术

Published on  2011年03月10日 in  javascript.  21 Comments

比onload更快获取图片尺寸

文章更新：2011-05-31
lightbox类效果为了让图片居中显示而使用预加载，需要等待完全加载完毕才能显示，体验不佳（如filick相册的全屏效果）。javascript无法获取img文件头数据，真的是这样吗？本文通过一个巧妙的方法让javascript获取它。

这是大部分人使用预加载获取图片大小的例子：

01 var imgLoad = function (url, callback) {
02     var img = new Image();
03
04     img.src = url;
05     if (img.complete) {
06         callback(img.width, img.height);
07     } else {
08         img.onload = function () {
09             callback(img.width, img.height);
10             img.onload = null;
11         };
12     };
13
14 };

可以看到上面必须等待图片加载完毕才能获取尺寸，其速度不敢恭维，我们需要改进。

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

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

当然实际中会有一些兼容陷阱，如width与height检测各个浏览器的不一致，还有webkit new Image()建立的图片会受以处在加载进程中同url图片影响，经过反复测试后的最佳处理方式：

01 // 更新：
02 // 05.27: 1、保证回调执行顺序：error > ready > load；2、回调函数this指向img本身
03 // 04-02: 1、增加图片完全加载后的回调 2、提高性能
04
05 /**
06  * 图片头数据加载就绪事件 - 更快获取图片尺寸
07  * @version 2011.05.27
08  * @author  TangBin
09  * @see     http://www.planeart.cn/?p=1121
10  * @param   {String}    图片路径
11  * @param   {Function}  尺寸就绪
12  * @param   {Function}  加载完毕 (可选)
13  * @param   {Function}  加载错误 (可选)
14  * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
15         alert('size ready: width=' + this.width + '; height=' + this.height);
16     });
17  */
18 var imgReady = (function () {
19     var list = [], intervalId = null,
20
21     // 用来执行队列
22     tick = function () {
23         var i = 0;
24         for (; i < list.length; i++) {
25             list[i].end ? list.splice(i--, 1) : list[i]();
26         };
27         !list.length && stop();
28     },
29
30     // 停止所有定时器队列
31     stop = function () {
32         clearInterval(intervalId);
33         intervalId = null;
34     };
35
36     return function (url, ready, load, error) {
37         var onready, width, height, newWidth, newHeight,
38             img = new Image();
39
40         img.src = url;
41
42         // 如果图片被缓存，则直接返回缓存数据
43         if (img.complete) {
44             ready.call(img);
45             load && load.call(img);
46             return;
47         };
48
49         width = img.width;
50         height = img.height;
51
52         // 加载错误后的事件
53         img.onerror = function () {
54             error && error.call(img);
55             onready.end = true;
56             img = img.onload = img.onerror = null;
57         };
58
59         // 图片尺寸就绪
60         onready = function () {
61             newWidth = img.width;
62             newHeight = img.height;
63             if (newWidth !== width || newHeight !== height ||
64                 // 如果图片已经在其他地方加载可使用面积检测
65                 newWidth * newHeight > 1024
66             ) {
67                 ready.call(img);
68                 onready.end = true;
69             };
70         };
71         onready();
72
73         // 完全加载完毕的事件
74         img.onload = function () {
75             // onload在定时器时间差范围内可能比onready快
76             // 这里进行检查并保证onready优先执行
77             !onready.end && onready();
78
79             load && load.call(img);
80
81             // IE gif动画会循环执行onload，置空onload即可
82             img = img.onload = img.onerror = null;
83         };
84