img预加载获取图片大小方法

   img预加载获取图片大小方法

[javascript]  view plain  copy

 print ?

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

      调用方法

[javascript]  view plain  copy

 print ?

1. imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {    
2.  alert('size ready: width=' + this.width + '; height=' + this.height);    
3. })