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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<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] = '//ku.shouce.ren/files/images/201601/56a33f7edd7a2.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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

图片代码

描述

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