图片预加载4

最新推荐文章于 2022-10-24 09:15:26 发布

界域

最新推荐文章于 2022-10-24 09:15:26 发布

阅读量215

点赞数

分类专栏： web前端文章标签：框架

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

版权

web前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

前面说的是图片的无序预加载，本篇主要说的是有序的预加载，使用场景比如看漫画时，按照顺序加载完毕的图片可以及时提供给用户浏览，这里的Dome主要还是用到前面无序加载的框架，只是图片的加载顺序是从第一张开始，一张一张的出来的

定义一个预加载方法，当前一张图片有了load事件（即图片加载完成）或者error事件（即图片加载错误）时，加载下一张图片，再将链接赋予给Image对象，其余保持不变，详细参考图片预加载1

function load() {
				var imgObj=new Image()
				$(imgObj).on('load error',function(){
					if(count>=len){
						//图片已经加载完毕
					}else{
						load()
					}
					document.title='1'+'/'+len
					count++;
				})
				imgObj.src=imgurls[count];
			}

附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;
			}
		</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>
		<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'
			]
			var index=0;
			var len = imgurls.length;
			var count=0;
			load();
			//有序预加载
			function load() {
				var imgObj=new Image()
				$(imgObj).on('load error',function(){
					if(count>=len){
						//图片已经加载完毕
					}else{
						load()
					}
					document.title='1'+'/'+len
					count++;
				})
				imgObj.src=imgurls[count];
			}
			
			$('.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
评论
图片预加载4

前面说的是图片的无序预加载，本篇主要说的是有序的预加载，使用场景比如看漫画时，按照顺序加载完毕的图片可以及时提供给用户浏览，这里的Dome主要还是用到前面无序加载的框架，只是图片的加载顺序是从第一张开始，一张一张的出来的定义一个预加载方法，当前一张图片有了load事件（即图片加载完成）或者error事件（即图片加载错误）时，加载下一张图片，再将链接赋予给Image对象，其余保持不变，详细参考图
复制链接

扫一扫