纯JS图片批量预加载技术代码

更新时间：2009年11月03日 23:19:20 作者：

一款实用的图片预加载技术，真正实现加载完成显示图片，加载过程中显示进度指示，本加载可以批量进行，将成批图片加载完成才显示，使用循环依次载入图片，并将路径暂存在数组中，加载完成后取出数组数据并显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>图片批量加载</title> </head> <body> <div id="status" ></div> <div id="processing"></div> <script type="text/javascript"> function $id(id){ return document.getElementById(id);} function $c(tagName){ return document.createElement(tagName);} window.onload = function(){ imageLoad( { url:function(v){ v = []; for(var i=1; i<=8; i++){ v[v.length] = '//img.jbzj.com/demoimg/200911/wall_s'+i+'.jpg?_='+(new Date).getTime(); } return v; }, oncomplete: function(s){ $id('status').innerHTML = '正在加载...'+s.complete+'/'+s.total; $id('processing').innerHTML = this.src; }, complete:function(imgs, s){ var $r = $c('div'); $r.id = 'result'; $r.innerHTML = '计划加载:'+s.total+', 加载成功:'+s.load+'错误:'+s.error; document.body.appendChild($r); for(var i=0, l=imgs.length, $m; i<l; i++){ $m = $c('div'); $m.innerHTML = (imgs[i].loaded?'加载成功:':'加载失败:')+ imgs[i].src; document.body.appendChild($m); } } }); }; function imageLoad( s ){     var urlset = [], undefined, toString = Object.prototype.toString;     switch( toString.apply(s.url) ){         case '[object String]': urlset[urlset.length] = s.url; break;         case '[object Array]': if(!s.url.length){ return false; } urlset = s.url; break;         case '[object Function]': s.url = s.url(); return imageLoad( s );         default: return false;     }     var imgset =[], r ={ total:urlset.length, load:0, error:0, abort:0, complete:0, currentIndex:0 }, timer,         _defaults = {             url:'',             onload: 'function',             onerror: 'function',             oncomplete: 'function',             ready: 'function',             complete: 'function',             timeout: 15         };     for( var v in _defaults){         s[v] = s[v]===undefined? _defaults[v]: s[v];     }     s.timeout = parseInt( s.timeout ) || _defaults.timeout;     timer = setTimeout( _callback, s.timeout*1000);     for( var i=0,l=urlset.length,img; i<l; i++){         img         = new Image();         img.loaded    = false;         imgset[imgset.length] = img;     }    for( i=0,l=imgset.length; i<l; i++){         imgset[i].onload     = function(){ _imageHandle.call(this, 'load', i ); };         imgset[i].onerror     = function(){ _imageHandle.call(this, 'error', i ); };         imgset[i].onabort     = function(){ _imageHandle.call(this, 'abort', i ); };         imgset[i].src         = ''+urlset[i];     }     if( _isFn(s.ready) ){ s.ready.call({}, imgset, r); }         function _imageHandle( handle, index ){         r.currentIndex = index;         switch( handle ){             case 'load':                 this.onload = null; this.loaded = true; r.load++;                 if( _isFn(s.onload) ){ s.onload.call(this, r); }                     break;case 'error': r.error++;                 if( _isFn(s.onerror) ){ s.onerror.call(this, r); }                 break;             case 'abort': r.abort++; break;         }         r.complete++;         // oncomplete 事件回调         if( _isFn(s.oncomplete) ){ s.oncomplete.call(this, r); }         // 判断全局加载         if( r.complete===imgset.length ){ _callback(); }     }     function _callback(){         clearTimeout( timer );         if( _isFn(s.complete) ){ s.complete.call({}, imgset, r); }     }     function _isFn(fn){ return toString.apply(fn)==='[object Function]'; }     return true; } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

利用javascript解决图片缩放及其优化的代码
说起IE6，真是让我们这些做前端的人又恨又无奈，许多属性都不支持。可不少用户还在用它，我们也不能无视。为了兼容，我只好跟同事请教了一下，然后针对IE6用js缩放来显示图片并进行了一些细节上的优化
2012-05-05
CSS 图片横向排列实现代码
一个CSS布局实例，介绍的是一个横向排列的图片列表，这也是大家在从事网页布局时候最常见的一种布局实例，有必要掌握，本代码已经过了优化，个别细节你需根据你的网站主CSS风格进行调整，才能完美搭配。
2010-03-03
js 图片缩放特效代码
非常不错nipic使用的图片缩放实现代码。
2009-05-05
用js实现上传图片前的预览（TX的面试题）
用js实现上传图片前的预览（TX的面试题）...
2007-08-08
图片分页查看
图片分页查看...
2006-08-08
js 加载时自动调整图片大小
又一个javascript自动调整图片大小的脚本
2008-05-05
符合web标准的连续滚动图像的js代码
符合web标准的连续滚动图像的js代码...
2007-02-02
3张图片循环组和(很有动感)
3张图片循环组和(很有动感)...
2006-07-07
纯CSS实现的漂亮的立体图片边框效果，阴影代码
纯CSS 漂亮的立体图片边框效果，图片阴影代码，个人觉得这个挺实用，CSs实现的，定义成类，可让你整个网页上的图片都是有立体阴影的，不错吧，感谢作者分享。
2010-10-10
JavaScript 类似flash效果的立体图片浏览器
这是一款比较有立体感的图片浏览器，通过图层定位技术z-index让浏览器正在查看的图片突显出来，并让两边的图片呈现半透明状态。很个性化哦！
2010-02-02

纯JS图片批量预加载技术代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具