图片无序预加载技术一

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

lucky芬

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

阅读量384

点赞数

分类专栏：前端小知识

本文链接：https://blog.csdn.net/daimomo000/article/details/76789570

版权

前端小知识专栏收录该内容

26 篇文章 2 订阅

订阅专栏

看视频记录一下。

预加载分为无序预加载和有序预加载。

demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片加载</title>
	<style>
		a{text-decoration: none;}
		.box{
			text-align: center;
		}
		.btn{
			display: inline-block;
			height: 30px;
			line-height: 30px;
			border:1px solid #ccc;
			background-color: #fff;
			padding:0 10px;
			margin-right: 50px;
			color: #333;
		}	
		.btn:hover{
			background-color: #eee;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" alt="" id="img" width="1000" height="600">
		<p>
			<a href="javascript:;" class="btn" data-control="prev">上一页</a>
			<a href="javascript:;" class="btn" data-control="next">下一页</a>
		</p>
	</div>
	<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
	<script>
		var imgs=[
			'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',
			'http://pic2.ooopic.com/10/51/63/13b1OOOPIC17.jpg',
			'http://img2.3lian.com/img2009/06/16/024.jpg',
			'http://pic1.nipic.com/2008-12-25/2008122510134038_2.jpg',
			'http://www.taopic.com/uploads/allimg/111017/2136-11101G62S667.jpg',
			'http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg'
		];
		var index= 0,
			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>

没有使用预加载技术，以至于点击上一页或者下一页按钮的时候出现假死状态。用户体验不好。下面将其改成无序预加载效果。

demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片加载</title>
	<style>
		html,body{
			height: 100%;
		}
		a{text-decoration: none;}
		.box{
			text-align: center;
		}
		.btn{
			display: inline-block;
			height: 30px;
			line-height: 30px;
			border:1px solid #ccc;
			background-color: #fff;
			padding:0 10px;
			margin-right: 50px;
			color: #333;
		}	
		.btn:hover{
			background-color: #eee;
		}
		.loading{
			position: fixed;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #eee;
			text-align: center;
			font-size: 30px;
		}
		.progress{
			margin-top: 300px;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" alt="" id="img" width="1000" height="600">
		<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 src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
	<script>
		var imgs=[
			'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',
			'http://pic2.ooopic.com/10/51/63/13b1OOOPIC17.jpg',
			'http://pic1.nipic.com/2008-12-25/2008122510134038_2.jpg',
			'http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg'
		];
		var index= 0,
			len=imgs.length,
			count=0,
			$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>

demo3.html

将js写成jquery

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片加载</title>
	<style>
		html,body{
			height: 100%;
		}
		a{text-decoration: none;}
		.box{
			text-align: center;
		}
		.btn{
			display: inline-block;
			height: 30px;
			line-height: 30px;
			border:1px solid #ccc;
			background-color: #fff;
			padding:0 10px;
			margin-right: 50px;
			color: #333;
		}	
		.btn:hover{
			background-color: #eee;
		}
		.loading{
			position: fixed;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #eee;
			text-align: center;
			font-size: 30px;
		}
		.progress{
			margin-top: 300px;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" alt="" id="img" width="1000" height="600">
		<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 src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
	<script src="preload.js"></script>
	<script>
		var imgs=[
			'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',
			'http://pic2.ooopic.com/10/51/63/13b1OOOPIC17.jpg',
			'http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg'
		];
		var index= 0,
			len=imgs.length,
			$progress=$('.progress');

		$.preload(imgs,{
			each:function(count){
				$progress.html(Math.round((count+1)/len *100)+'%');
			},
			all:function(argument) {
				$('.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>

//图片预加载
(function($){
	function PreLoad(imgs,options){
		this.imgs = (typeof imgs === 'string')?[imgs]:imgs;
		this.opts = $.extend({},PreLoad.DEFAULTS,options);
		this._unoredered();
	}
	PreLoad.DEFAULTS={
		each:null,//每一张图片加载完毕后执行
		all:null//所有图片加载完毕后执行
	};
	PreLoad.prototype._unoredered=function(){//无序加载
		var imgs=this.imgs,
			opts=this.opts,
			count=0,
			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);

				if(count >= len-1){
					opts.all && opts.all();
				}
				count++;
			});
			imgObj.src=src;
		});
	};
	$.extend({
		preload:function(imgs,opts){
			new PreLoad(imgs,opts);
		}
	});
})(jQuery);

lucky芬

关注

0
点赞
踩
0

收藏

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

看视频记录一下。预加载分为无序预加载和有序预加载。demo1.html 图片加载 a{text-decoration: none;} .box{ text-align: center; } .btn{ display: inline-block; height: 30px; line-height: 30px; border:
复制链接

扫一扫