图片有序预加载

最新推荐文章于 2021-09-04 16:59:31 发布

muzi187

最新推荐文章于 2021-09-04 16:59:31 发布

阅读量235

点赞数

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

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

版权

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',
		'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;

	load();

	//有序预加载
	function load(){
		var imgObj=new Image();
		$(imgObj).on('load error',function(){
			if(count>=len){
				//所有图片加载完成
			}else{
				load();
			}
			count++;
		});
		imgObj.src=imgs[count];
	}

	$('.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、图片有序预加载 -- 使用chaji

<!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" 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;

	$.preload(imgs,{
		order:'ordered'
	});

	$('.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);

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=&qu
复制链接

扫一扫