图片无序预加载

最新推荐文章于 2018-07-22 22:06:09 发布

muzi187

最新推荐文章于 2018-07-22 22:06:09 发布

阅读量196

点赞数

分类专栏： html jQuery 图片文章标签： HTML jQuery 图片

本文链接：https://blog.csdn.net/muzi187/article/details/79408839

版权

html 同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

jQuery

22 篇文章 0 订阅

订阅专栏

图片

7 篇文章 0 订阅

订阅专栏

1、不使用预加载

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>图片预加载之无序加载-未使用预加载</title>
<style type="text/css">
	a{text-decoration:none;}
	.box{
		text-align:center;

	}
	img{width:100%;}
	.btn{
		display:inline-block;
		height:30px;
		line-height:30px;
		border:#CCC solid 1px;
		background-color:#FFF;
		padding:0 10px;
		margin-right:50px;
		color:#333;
	}
	.btn:hover{
		background-color:#eee;
	}
</style>
</head>
<body>

<div class="box">
	<img src="image/1.png" id="img">
	<p>
		<a href="javascript:;" class="btn" data-control="prev">上一页</a>
		<a href="javascript:;" class="btn" data-control="next">下一页</a>
	</p>
</div>

<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
	var imgs=[
		'image/1.png',
		'image/2.png',
		'image/3.png',
		'image/4.png',
		'image/5.png',
		'image/6.png'
	];
	var index=0;
	var len=imgs.length;
	$('.btn').on('click',function(){
		if('prev'===$(this).data('control')){//上一张
//			index--;
//			if(index<0){
//				index=0;
//			}
			index=Math.max(0,--index);
		}else{//下一张
			index=Math.min(len-1,++index);
		}
		document.title=(index+1)+'/'+len;
		$('#img').attr('src',imgs[index]);
	});
</script>
	
</body>
</html>

2、使用预加载

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>图片预加载之无序加载-使用预加载</title>
<style type="text/css">
	a{text-decoration:none;}
	.box{
		text-align:center;

	}
	img{width:100%;}
	.btn{
		display:inline-block;
		height:30px;
		line-height:30px;
		border:#CCC solid 1px;
		background-color:#FFF;
		padding:0 10px;
		margin-right:50px;
		color:#333;
	}
	.btn:hover{
		background-color:#eee;
	}
	.loading{
		position:fixed;
		top:0;
		left:0;
		bottom:0;
		width:100%;
		background-color:#eee;
		text-align:center;
		font-size:30px;
	}
	.progress{margin-top:300px;}
</style>
</head>
<body>

<div class="box">
	<img src="image/1.png" id="img">
	<p>
		<a href="javascript:;" class="btn" data-control="prev">上一页</a>
		<a href="javascript:;" class="btn" data-control="next">下一页</a>
	</p>
</div>
<div class="loading">
	<p class="progress">0%</p>
</div>

<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
	var imgs=[
		'image/1.png',
		'image/2.png',
		'image/3.png',
		'image/4.png',
		'image/5.png',
		'image/6.png',
		'image/7.png',
		'image/8.png',
		'image/9.png',
		'image/10.png',
		'image/11.png',
		'image/12.png'
	];
	var index=0;
	var len=imgs.length;
	var count=0;
	var $progress=$(".progress");

	$.each(imgs,function(i,src){
		var imgObj=new Image();
		$(imgObj).on('load error',function(){
			$progress.html(Math.round((count+1)/len*100)+'%');
			if(count>=len-1){
				$('.loading').hide();
				document.title='1/'+len;
			}
			count++;
		});
		imgObj.src=src;
	});

	$('.btn').on('click',function(){
		if('prev'===$(this).data('control')){//上一张
//			index--;
//			if(index<0){
//				index=0;
//			}
			index=Math.max(0,--index);
		}else{//下一张
			index=Math.min(len-1,++index);
		}
		document.title=(index+1)+'/'+len;
		$('#img').attr('src',imgs[index]);
	});
</script>
	
</body>
</html>

3、无序预加载使用插件

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>图片预加载之无序加载-使用预加载</title>
<style type="text/css">
	a{text-decoration:none;}
	.box{
		text-align:center;

	}
	img{width:100%;}
	.btn{
		display:inline-block;
		height:30px;
		line-height:30px;
		border:#CCC solid 1px;
		background-color:#FFF;
		padding:0 10px;
		margin-right:50px;
		color:#333;
	}
	.btn:hover{
		background-color:#eee;
	}
	.loading{
		position:fixed;
		top:0;
		left:0;
		bottom:0;
		width:100%;
		background-color:#eee;
		text-align:center;
		font-size:30px;
	}
	.progress{margin-top:300px;}
</style>
</head>
<body>

<div class="box">
	<img src="image/1.png" id="img">
	<p>
		<a href="javascript:;" class="btn" data-control="prev">上一页</a>
		<a href="javascript:;" class="btn" data-control="next">下一页</a>
	</p>
</div>
<div class="loading">
	<p class="progress">0%</p>
</div>

<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/preload.js"></script>
<script type="text/javascript">
	var imgs=[
		'image/1.png',
		'image/2.png',
		'image/3.png',
		'image/4.png',
		'image/5.png',
		'image/6.png',
		'image/7.png',
		'image/8.png',
		'image/9.png',
		'image/10.png',
		'image/11.png',
		'image/12.png'
	];
	var index=0;
	var len=imgs.length;
	var $progress=$(".progress");

	$.preload(imgs,{
		each:function(count){
			$progress.html(Math.round((count+1)/len*100)+'%');
		},
		all:function(){
			$('.loading').hide();
			document.title='1/'+len;
		}
	});

	$('.btn').on('click',function(){
		if('prev'===$(this).data('control')){//上一张
//			index--;
//			if(index<0){
//				index=0;
//			}
			index=Math.max(0,--index);
		}else{//下一张
			index=Math.min(len-1,++index);
		}
		document.title=(index+1)+'/'+len;
		$('#img').attr('src',imgs[index]);
	});
</script>
	
</body>
</html>

插件preload.js

//图片预加载
(function($){
	
	function PreLoad(imgs,opts){
		this.imgs=(typeof imgs === 'string')? [imgs]:imgs;
		this.opts=$.extend({},PreLoad.DEFAULTS,opts);
		
		if(this.opts.order==='ordered'){
			this._ordered();
		}else{
			this._unordered();
		}
		
	}
	PreLoad.DEFAULTS={
		order:'unordered',//默认无序预加载
		each:null, //每一张图片加载完毕后执行
		all:null //所有图片加载完毕后执行
	};

	PreLoad.prototype._ordered=function(){  //有序加载
		var imgs=this.imgs;
		var opts=this.opts;
		var count=0;
		var len=imgs.length;

		load();

		//有序预加载
		function load(){
			var imgObj=new Image();
			$(imgObj).on('load error',function(){
				opts.each && opts.each(count);
				if(count>=len){
					//所有图片加载完成
					opts.all && opts.all();
				}else{
					load();
				}
				count++;
			});
			imgObj.src=imgs[count];
		}
	},
	PreLoad.prototype._unordered=function(){  //无序加载
		var imgs=this.imgs;
		var opts=this.opts;
		var count=0;
		var len=imgs.length;

		$.each(imgs,function(i,src){
			if(typeof src !='string') return;

			var imgObj=new Image();
			$(imgObj).on('load error',function(){
				opts.each && opts.each(count);
				//$progress.html(Math.round((count+1)/len*100)+'%');
				if(count>=len-1){
					//$('.loading').hide();
					//document.title='1/'+len;
					opts.all && opts.all();
				}
				count++;
			});
			imgObj.src=src;
		});
	};

	$.extend({
		preload:function(imgs,opts){
			new PreLoad(imgs,opts);
		}
	});

})(jQuery);

4、QQ表情无序预加载

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片预加载之无序加载--QQ表情</title>
</head>
<style type="text/css">
body,p,ul,li{padding:0;margin:0;}
body{background-color:#eee;}
a{text-decoration:none;outline:none;}
li{list-style-type:none;}
.box{margin:150px 0 0 200px;}
#face-btn{display:block;color:#333;}
#face-btn:hover{color:red;}
.panel{
	display:none;
	width:390px;
	padding:2px;
	border:1px solid #ccc;
	background-color:#FFF;
}
.loading{text-align:center;}
.list li{
	display:inline-block;
	width:24px;height:24px;
	border:1px solid #FFF;
	margin-bottom:5px;
	cursor:pointer;
}
.list li img{width:24px;height:24px;}
.list li:hover{border-color:#06c;}
</style>
<body>

<div class="box">

	<a href="javascript:;" id="face-btn">表情</a>
	<div class="panel">
		<p class="loading">表情加载中，请稍后...</p>
	</div>
</div>

<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/preload.js"></script>
<script type="text/javascript">
var $btn=$("#face-btn");
var $panel=$(".panel");
var imgs=[];
for(var i=0;i<100;i++){
	imgs[i]='face/qq/'+(i+1)+'.gif';
}
var len=imgs.length;
$btn.on('click',function(e){
	e.stopPropagation();
	$panel.show();

	//图片预加载
	$.preload(imgs,{
		all:function(){
			var html='';

			html+='<ul class="list">';

			for(var i=0;i<len;i++){
				html+='<li><img src="'+imgs[i]+'"></li>';
			}

			html+='</ul>';
			/*setTimeout(function(){ //查看效果时测试
				$panel.html(html);
			},1000);*/
			$panel.html(html);
		}
	});
});

$(document).on('click', function() {
	$panel.click(function() {
		return false;
	});
	$panel.hide();
});
</script>
</body>
</html>

muzi187

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片无序预加载

1、不使用预加载&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;meta name="Generator" content="EditPlus®"&gt;&lt;meta name="Author&
复制链接

扫一扫