图片预加载1

最新推荐文章于 2023-01-05 17:38:03 发布

界域

最新推荐文章于 2023-01-05 17:38:03 发布

阅读量296

点赞数

分类专栏： web前端

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

版权

web前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

最近在学习慕课网上的图片预加载课程，所以总结一下

实现的效果，如图所示

也就是进入页面以前，先提前加载完成所有的图片，所以，在进入页面后图片的切换过程中，不会出现卡顿空白的情况，影响体验效果

首先，搭建好我们的框架

index.html

<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>

css

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;
			}

<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'
			]
			
			var index=0;
			$('.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>

通过以上的代码片段搭建了整体的框架，通过为按钮赋予自定义数据（data-control）后，在点击时间中加以判断（$(this.data('control'))）的值，实现了左右切换的效果，但是没有任何的图片预加载功能，如果网速教慢，很容易出现卡顿或空白
为了更加直观的展示图片预加载，所以再增加一个div，展示图片加载的百分比，覆盖到内容页面上面

<div class="loading">
			<p id="progress">0%</p>
		</div>

.loading{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #EEEEEE;
				text-align: center;
			}
			#progress{
				font-size: 30px;
				margin-top: 300px;
			}

效果如下

再通过js代码实现图片的预加载效果

<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'
			]
			
			var index=0;
			len = imgurls.length;
			count=0;
			
			$.each(imgurls, 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').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>

每加载一张图片，页面都会更新加载进度的百分比，当完全加载后，百分比的页面则会隐藏，进入到图片浏览的页面，这就是一个简单的无序图片预加载功能，这其中最为核心的功能就是通过对实例化后的Image对象进行load事件以及error事件的监听，最后对每一个事件节点进行处理，将链接赋予img元素

var imgObj=new Image()
				$(imgObj).on('load error',function(){
					
				})
				imgObj.src=src;

最终效果

附完整代码一份

<!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>
			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'
			]
			
			var index=0;
			len = imgurls.length;
			count=0;
			
			$.each(imgurls, function(i,src) {
				var imgObj=new Image()
				$(imgObj).on('load error',function(){
					$('#progress').html(Math.round((count+1)/len*100)+'%')
					if(count>=len-1){//加载完毕后隐藏
						setTimeout(function(){
							$('.loading').hide();
						},1000)
					}
					document.title='1'+'/'+len
					count++;
				})
				imgObj.src=src;
			});
			
			$('.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>

界域

关注

0
点赞
踩
0

收藏

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

最近在学习慕课网上的图片预加载课程，所以总结一下实现的效果，如图所示也就是进入页面以前，先提前加载完成所有的图片，所以，在进入页面后图片的切换过程中，不会出现卡顿空白的情况，影响体验效果首先，搭建好我们的框架上一页下一页 html,body{ width: 100%; } .content{ tex
复制链接

扫一扫

专栏目录