純JS圖片批量預加載技術代碼_圖片特效特效

一款實用的圖片預加載技術，真正實現(xiàn)加載完成顯示圖片，加載過程中顯示進度指示，本加載可以批量進行，將成批圖片加載完成才顯示，使用循環(huán)依次載入圖片，并將路徑暫存在數(shù)組中，加載完成后取出數(shù)組數(shù)據(jù)并顯示。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>圖片批量加載</title>
</head>
<body>
<div   class="znjbzjn"   id="status" ></div>
<div   class="znjbzjn"   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] = 'http://www.hl5o.cn/jscss/demoimg/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 事件回調(diào)
		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>

所屬頻道：圖片特效特效/更新時間：2012-11-29

[收藏][報錯][返回列表]

相關圖片特效特效：

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些

相關鏈接：
復制本頁鏈接| 搜索純JS圖片批量預加載技術代碼
特效說明：
圖片特效模板-純JS圖片批量預加載技術代碼。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

純JS圖片批量預加載技術代碼_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些