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

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="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] = 'http://www.mb5u.com/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 事件回调
		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

[收藏][报错][返回列表]

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

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些