技术文章 订阅所有【技术文章】的日志

javascript图片预加载技术

作者:admin 日期:2012-04-14

字体大小: 小 中 大

比onload更快获取图片尺寸

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

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. })();  

 调用方法：

JavaScript代码
  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. });   


上一篇: Javascript图片预加载技术
下一篇: 将css值转换成数值请抛弃parseInt
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: javascript
相关日志:
评论: 0 | 引用: 0 | 查看次数: 2001
发表评论
昵　称:
密　码: 游客发言不需要密码.
邮　箱: 邮件地址支持Gravatar头像,邮箱地址不会公开.
网　址: 输入网址便于回访.
内　容:
验证码:
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
字数限制 1000 字 | UBB代码 开启 | [img]标签 关闭

 广告位

↑返回顶部↑