图片预加载2

最新推荐文章于 2023-08-27 22:41:13 发布

界域

最新推荐文章于 2023-08-27 22:41:13 发布

阅读量247

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_36465347/article/details/72829194

版权

web前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

上一篇实现了简单的图片无序加载功能，本篇主要是要将无须加载的功能提取出来，扩展到jQuery中作为插件中，方便其他地方使用

新建一个Perload.js，然后在index.html中引入该js，在闭包模式下，创建构造函数，以及默认DEFULATS对象，构造函数中接收两个参数，分别为图片路径，以及需要操作的对象

(function($){
	//构造函数,必须与文件名一致
	function Perload(imgs,options){
		//如果传过来的值是字符串，则将其包成数组，否则说明传过来的是数组，不用包
		this.imgs=(typeof imgs==='string')?[imgs]:imgs;
		//将右边两个对象融合（最右边的对象覆盖中间的对象），生成新的对象
		this.opts=$.extend({}, Perload.DEFULATS, options);
	}
	Perload.DEFULATS={
		choose:'oredered',
		each:null,//每张图片加载完后执行
		all:null//所有图片加载完后执行
	}

})(jQuery)

接着就是无序加载的方法，并且在构造函数中调用

//写在原型链上，使对象实例化时保持一份
	Perload.prototype._unoredered=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(){
					//如果前边的optes.each不为null，则执行后面的方法
					opts.each&&opts.each(count);
					if(count>=len-1){//加载完毕后隐藏
						//如果前边的optes.all不为null，则执行后面的方法
						opts.all&&opts.all();
					}
					document.title='1'+'/'+len
					count++;
				})
				imgObj.src=src;
			});
			
	}

再扩充到jQuery类中，可直接通过$调用

$.extend({
		perload:function(imgs,opts){
			new Perload(imgs,opts)
		}
	});

最后在index.html中调用，分别将两个参数传过去即可

	var index=0;
			len = imgurls.length;
			//加载工具方法
			$.perload(imgurls,{
				choose:'unordered',
				each:function(count){
					$('#progress').html(Math.round((count+1)/len*100)+'%')
				},
				all:function(){
					$('.loading').hide();
					document.title='1/'+len;
				}
			})

index.html

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>图片预加载无序加载</title>
		<script src="../js/jquery-2.1.0.js" ></script>
		<style>
			html,body{
				width: 100%;
			}
			.content{
				text-align: center;
			}
			a{
				/*去除下划线*/
				text-decoration: none;
			}
			img{
				/*设置一边,另一边会自动适应*/
				height: 540px;
			}
			.btn{
				/*内联标签,无法设置高度，需要转换为inline-block*/
				display: inline-block;
				height: 30px;
				line-height: 30px;
				padding: 0 10px;
				margin-right: 50px;
				color: #333;
				border-radius: 5px;
				border: 1px solid gray;
			}
			.btn:hover{
				background-color: #eee;
			}
			.loading{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #EEEEEE;
				text-align: center;
			}
			#progress{
				font-size: 30px;
				margin-top: 300px;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<img id="img" src="http://pic36.photophoto.cn/20150806/0020033010710307_b.jpg" />
			<p>
				<a href="javascript:;" data-control = "prev" class="btn">上一页</a>
				<a href="javascript:;" data-control = "next" class="btn">下一页</a>
			</p>
		</div>
		<div class="loading">
			<p id="progress">0%</p>
		</div>
		<script src="../js/perload.js"></script>
		<script>
			imgurls=[
				'http://pic36.photophoto.cn/20150806/0020033010710307_b.jpg',
				'http://scimg.jb51.net/allimg/160711/105-160G1120502414.jpg',
				'http://pic26.photophoto.cn/20130130/0020032918859808_b.jpg',
				'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1496208088700&di=67c4e9fa0cad3b11e314a1c9369d9e08&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1207%2F1043%2Fntk120541.jpg',
				'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1496198047&di=7074c556d82b98c6e273e3a3b9e370f3&src=http://img5q.duitang.com/uploads/item/201506/09/20150609092221_xcwEW.jpeg'
			]
			var index=0;
			len = imgurls.length;
			//加载工具方法
			$.perload(imgurls,{
				each:function(count){
					$('#progress').html(Math.round((count+1)/len*100)+'%')
				},
				all:function(){
					$('.loading').hide();
					document.title='1/'+len;
				}
			})
			$('.btn').click(function(){
				if($(this).data('control')==='prev'){//上一页
					index=Math.max(0,--index)
					
				}else{//下一页
					index=Math.min(len-1,++index)
				}
				document.title=(index+1)+"/"+len
				$('#img').attr('src',imgurls[index])
			})
		</script>
	</body>
</html>

Perload.js

(function($){
	//构造函数,必须与文件名一致
	function Perload(imgs,options){
		//如果传过来的值是字符串，则将其包成数组，否则说明传过来的是数组，不用包
		this.imgs=(typeof imgs==='string')?[imgs]:imgs;
		//将右边两个对象融合（最右边的对象覆盖中间的对象），生成新的对象
		this.opts=$.extend({}, Perload.DEFULATS, options);
		this._unoredered();
		
	}
	Perload.DEFULATS={
		each:null,//每张图片加载完后执行
		all:null//所有图片加载完后执行
	}
	//写在原型链上，使对象实例化时保持一份
	Perload.prototype._unoredered=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(){
					//如果前边的optes.each不为null，则执行后面的方法
					opts.each&&opts.each(count);
					if(count>=len-1){//加载完毕后隐藏
						//如果前边的optes.all不为null，则执行后面的方法
						opts.all&&opts.all();
					}
					document.title='1'+'/'+len
					count++;
				})
				imgObj.src=src;
			});
			
	}
	$.extend({
		perload:function(imgs,opts){
			new Perload(imgs,opts)
		}
	});
})(jQuery)

界域

关注

0
点赞
踩
0

收藏

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

上一篇实现了简单的图片无序加载功能，本篇主要是要将无须加载的功能提取出来，扩展到jQuery中作为插件中，方便其他地方使用新建一个Perload.js，然后在index.html中引入该js，在闭包模式下，创建构造函数，以及默认DEFULATS对象，构造函数中接收两个参数，分别为图片路径，以及需要操作的对象(function($){ //构造函数,必须与文件名一致 function P
复制链接

扫一扫

专栏目录