javascript-图片预加载技术

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