图片预加载3

最新推荐文章于 2022-08-13 12:27:49 发布

界域

最新推荐文章于 2022-08-13 12:27:49 发布

阅读量244

点赞数

分类专栏： web前端

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

版权

web前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

前面将图片的无序预加载提取出来，并做成了插件，这里做一个表情图片预加载的列子

首先在index.html的中引入jQuery和Perload.js插件，开始布局，这里我用的HBulider，在插入表情图片路径时可使用快速语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表情的图片预加载</title>
		<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<style>
			body,p,li,ul{
				margin: 0;
				padding: 0;
			}
			body{
				width: 100%;
				background-color: #EEEEEE;
			}
			a{
				text-decoration: none;
			}
			img{
				width: 5em;
			}
			.face-btn{
				padding: 5px;
				display: block;
				text-indent: 20px;
				color: olivedrab;
				background: url(face_imgs/other/a.jpg) no-repeat 5px;
				background-size: 20px;
				width: 100px;
				margin: 20px auto;
			}
			.face-btn:hover{
				background: url(face_imgs/other/b.jpg) no-repeat 5px;
				background-size: 20px;
			}
			.face-plane{
				background-color: #fff;
				width: 420px;
				border: 1px solid olivedrab;
				padding: 2px;
				display: none;
			}
			.face-title{
				text-align: center;
			}
			#list>li{
				display: inline-block;
				width: 5em;
				border: 2px solid #fff;
				cursor: pointer;
			}
			#list>li:hover{
				border-color: olivedrab;
			}
			.box{
				width: 420px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="javascript:;" class="face-btn">表情大全</a>
			<div class="face-plane">
				<p class="face-title">表情加载中，请稍后</p>
				<!--快速写法ul#list>li*24>img[src='face_imgs/4692/$.gif'],再按TAB，实现自动计数-->
				<!--<ul id="list">
					<li><img src="face_imgs/4692/00.gif" alt="" /></li>
					<li><img src="face_imgs/4692/01.gif" alt="" /></li>
					<li><img src="face_imgs/4692/02.gif" alt="" /></li>
					<li><img src="face_imgs/4692/03.gif" alt="" /></li>
					<li><img src="face_imgs/4692/04.gif" alt="" /></li>
					<li><img src="face_imgs/4692/05.gif" alt="" /></li>
					<li><img src="face_imgs/4692/06.gif" alt="" /></li>
					<li><img src="face_imgs/4692/07.gif" alt="" /></li>
					<li><img src="face_imgs/4692/08.gif" alt="" /></li>
					<li><img src="face_imgs/4692/09.gif" alt="" /></li>
					<li><img src="face_imgs/4692/10.gif" alt="" /></li>
					<li><img src="face_imgs/4692/11.gif" alt="" /></li>
					<li><img src="face_imgs/4692/12.gif" alt="" /></li>
					<li><img src="face_imgs/4692/13.gif" alt="" /></li>
					<li><img src="face_imgs/4692/14.gif" alt="" /></li>
					<li><img src="face_imgs/4692/15.gif" alt="" /></li>
					<li><img src="face_imgs/4692/16.gif" alt="" /></li>
					<li><img src="face_imgs/4692/17.gif" alt="" /></li>
					<li><img src="face_imgs/4692/18.gif" alt="" /></li>
					<li><img src="face_imgs/4692/19.gif" alt="" /></li>
					<li><img src="face_imgs/4692/20.gif" alt="" /></li>
					<li><img src="face_imgs/4692/21.gif" alt="" /></li>
					<li><img src="face_imgs/4692/22.gif" alt="" /></li>
					<li><img src="face_imgs/4692/23.gif" alt="" /></li>
				</ul>-->
			</div>
		</div>
		<script src="../js/Perload.js"></script>
	</body>
</html>

当然，我们的表情图片不是通过html代码直接引入，而是通过js代码无序加载后再引入，只不过这里的图片放在我们本地，所以注释掉上面的ul标签下单代码，使用js生成路径，并赋给imgs数组

var imgs=[];
			
			for(var i=0;i<24;i++){
				if(i<10){
					imgs[i]='face_imgs/4692/0'+i+'.gif';
				}else{
					imgs[i]='face_imgs/4692/'+i+'.gif';
				}
			}

通过点击时间触发图片加载，并且生成图片布局

$('.face-btn').click(function(e){
				//禁止事件冒泡，否则始终隐藏面板
				e.stopPropagation()
				$('.face-plane').show()
				$.perload(imgs,{
					choose:'unoredered',
					all:function(){
					var html='';
					html+='<ul id="list">';
					for(var i=0;i<imgs.length;i++){
						html+='<li><img src="' +imgs[i]+ '"/></li>';
					}
					html+='</ul>';
					setTimeout(function(){
						$('.face-plane').html(html);
					},1000)
					}
				})
			})
			$(document).on('click',function(){
				$('.face-plane').hide()
			})

这里尤其要注意的时，点击时间的冒泡事件，因为我们对document也设定了点击事件，为了防止直接点的冒泡，所以在子节点的触发函数中，对时间对象禁止事件冒泡e.stopPropagation()，好了，这样表情的加载完成了，是不是很简单呢

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表情的图片预加载</title>
		<script src="../js/jquery-2.1.0.js" ></script>
		<style>
			body,p,li,ul{
				margin: 0;
				padding: 0;
			}
			body{
				width: 100%;
				background-color: #EEEEEE;
			}
			a{
				text-decoration: none;
			}
			img{
				width: 5em;
			}
			.face-btn{
				padding: 5px;
				display: block;
				text-indent: 20px;
				color: olivedrab;
				background: url(face_imgs/other/a.jpg) no-repeat 5px;
				background-size: 20px;
				width: 100px;
				margin: 20px auto;
			}
			.face-btn:hover{
				background: url(face_imgs/other/b.jpg) no-repeat 5px;
				background-size: 20px;
			}
			.face-plane{
				background-color: #fff;
				width: 420px;
				border: 1px solid olivedrab;
				padding: 2px;
				display: none;
			}
			.face-title{
				text-align: center;
			}
			#list>li{
				display: inline-block;
				width: 5em;
				border: 2px solid #fff;
				cursor: pointer;
			}
			#list>li:hover{
				border-color: olivedrab;
			}
			.box{
				width: 420px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="javascript:;" class="face-btn">表情大全</a>
			<div class="face-plane">
				<p class="face-title">表情加载中，请稍后</p>
				<!--快速写法ul#list>li*24>img[src='face_imgs/4692/$.gif'],再按TAB，实现自动计数-->
				<!--<ul id="list">
					<li><img src="face_imgs/4692/00.gif" alt="" /></li>
					<li><img src="face_imgs/4692/01.gif" alt="" /></li>
					<li><img src="face_imgs/4692/02.gif" alt="" /></li>
					<li><img src="face_imgs/4692/03.gif" alt="" /></li>
					<li><img src="face_imgs/4692/04.gif" alt="" /></li>
					<li><img src="face_imgs/4692/05.gif" alt="" /></li>
					<li><img src="face_imgs/4692/06.gif" alt="" /></li>
					<li><img src="face_imgs/4692/07.gif" alt="" /></li>
					<li><img src="face_imgs/4692/08.gif" alt="" /></li>
					<li><img src="face_imgs/4692/09.gif" alt="" /></li>
					<li><img src="face_imgs/4692/10.gif" alt="" /></li>
					<li><img src="face_imgs/4692/11.gif" alt="" /></li>
					<li><img src="face_imgs/4692/12.gif" alt="" /></li>
					<li><img src="face_imgs/4692/13.gif" alt="" /></li>
					<li><img src="face_imgs/4692/14.gif" alt="" /></li>
					<li><img src="face_imgs/4692/15.gif" alt="" /></li>
					<li><img src="face_imgs/4692/16.gif" alt="" /></li>
					<li><img src="face_imgs/4692/17.gif" alt="" /></li>
					<li><img src="face_imgs/4692/18.gif" alt="" /></li>
					<li><img src="face_imgs/4692/19.gif" alt="" /></li>
					<li><img src="face_imgs/4692/20.gif" alt="" /></li>
					<li><img src="face_imgs/4692/21.gif" alt="" /></li>
					<li><img src="face_imgs/4692/22.gif" alt="" /></li>
					<li><img src="face_imgs/4692/23.gif" alt="" /></li>
				</ul>-->
			</div>
		</div>
		<script src="../js/Perload.js"></script>
		<script type="text/javascript">
			var imgs=[];
			
			for(var i=0;i<24;i++){
				if(i<10){
					imgs[i]='face_imgs/4692/0'+i+'.gif';
				}else{
					imgs[i]='face_imgs/4692/'+i+'.gif';
				}
			}


			$('.face-btn').click(function(e){
				//禁止事件冒泡，否则始终隐藏面板
				e.stopPropagation()
				$('.face-plane').show()
				$.perload(imgs,{
					choose:'unoredered',
					all:function(){
					var html='';
					html+='<ul id="list">';
					for(var i=0;i<imgs.length;i++){
						html+='<li><img src="' +imgs[i]+ '"/></li>';
					}
					html+='</ul>';
					setTimeout(function(){
						$('.face-plane').html(html);
					},1000)
					}
				})
			})
			$(document).on('click',function(){
				$('.face-plane').hide()
			})
		</script>
	</body>
</html>

界域

关注

0
点赞
踩
0

收藏

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

前面将图片的无序预加载提取出来，并做成了插件，这里做一个表情图片预加载的列子首先在index.html的中引入jQuery和Perload.js插件，开始布局，这里我用的HBulider，在插入表情图片路径时可使用快速语法表情的图片预加载 body,p,li,ul{ margin: 0; padding: 0; } b
复制链接

扫一扫

专栏目录