教程集 > 脚本编程 > javascript > 正文 js图片批量加载效果代码

js图片批量加载效果代码

发布时间：2023-06-06 编辑：jiaochengji.com

教程集为您提供js图片批量加载效果代码等资源，欢迎您收藏本站，我们将为您提供最新的js图片批量加载效果代码资源

提示：您可以先修改部分代码再运行

<!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<=100; i  ){              v[v.length] = 'http://www.landgame.com.cn/images/game/slg_pic/GifBorder_' i '.gif?_=' (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);  	// 生成 image 对象数组  	for( var i=0,l=urlset.length,img; i<l; i  ){  		img 		= new Image();  		img.loaded	= false;  		imgset[imgset.length] = img;  	}  	// onload & onerror 绑定  	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];  	}  	// ready 事件回调  	if( _isFn(s.ready) ){ s.ready.call({}, imgset, r); }	  	// onload & onerror 句柄  	function _imageHandle( handle, index ){  		r.currentIndex = index;  		switch( handle ){  			case 'load':  				this.onload  = null; this.loaded = true; r.load  ;  				// onload 事件回调  				if( _isFn(s.onload) ){ s.onload.call(this, r); }	  				break;  			case 'error': r.error  ;  				// onerror 事件回调  				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>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
 PHP批量下载html与css中图片文件实例
 jquery.lazyload 实现图片延迟加载jquery插件
 使用jquery插件实现图片延迟加载技术详细说明
 jquery图片延迟加载前端开发技能必备系列
 文章中所有图片width大小批量设置方法
 基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
python怎么一次性下载多个文件
 JS实现图片预加载而无需等待的方法
 jquery 图片预加载自动等比例缩放插件

上一篇：js 调色板工具代码

[关闭]

js图片批量加载效果代码

最近更新

浏览排行