图片预加载

2018-06-24 00:16:40来源：未知阅读 ()

图片预加载就是获取需要预加载的图片后，遍历所有图片路径通过创建 new Image() 预先把图片读取缓存好。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
				padding: 5px 10px;
				border: 1px solid #000;
			}
			div{
				width: 500px;
				margin: 50px auto;
			}
			img{
				width: 100%;
			}
			.zhao{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #eee;
				text-align: center;
				line-height: 100%;
				padding-top: 200px;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="/info/upimg/allimg/180624/001A15959-0.jpg" id="img"/> 
			<p>
				<a href="javascript:;" class="btn" data-src="shang">上一页</a> <!-- 上一页按钮 -->
				<a href="javascript:;" class="btn" data-src="xia">下一页</a> <!-- 下一页按钮 -->
			</p>
		</div>
		
		<p class="zhao">0%</p>
		
		
		<script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
　　　　　　　　　　　　　　//一些网站的图片路径
			var imgs=[
		
				'/info/upimg/allimg/180624/001A15959-0.jpg',
		
				'http://lcd.yesky.com/imagelist/2009/044/404q4y8g4m0p.jpg',
		
				'http://lcd.yesky.com/imagelist/2009/044/cgro54wt2t2x.jpg'
			]; 
			
			var index = 0; //当前所显示的图片的下标
			var len = imgs.length;  //所有图片的长度
			var count = 0;  //遍历了多少张
			
			$.each(imgs,function(i,src) {  //遍历所有的图片路径
				var imgObj = new Image();  //创建 image 对象
				imgObj.src=src; //使用图片路径后浏览器就会有图片的缓存
				$(imgObj).on("load",function(){  //image 对象有一个图片加加载完成事件
					$(".zhao").html(Math.round((count+1)/len*100) + "%"); //加载了百分之多少
					if(count >= len-1){  //当加载的图片数量等于图片的长度时加载完成了 所有
						$(".zhao").hide(); //把加载完成的百分比遮罩 隐藏掉
					}
					count++; //加载完成一张 ++ 一次
				});
				
				
			});
			
			
			$(".btn").on("click",function(){  //图片上一张和下一张
				if($(this).attr("data-src")=="shang"){ //判断点击的是上一张还是下一张
					index = Math.max(0, --index); //点击的是上一张的时候每次index-- 利用 Math.max  当下标小于0 直接选取出0 这样就不会出现小于0 的情况
				}else{
					index = Math.min(len-1, ++index); //与上边同理  只是 ++ 过后 小于 imgs 长度-1 的时候 使用 ++index 后的数  如果大于 使用 长度-1 后的数  
				}
				document.title=(index+1)+"/"+len;  //在头部显示当前页
				$("#img").attr("src",imgs[index]); //从新赋值 src 改变图片
				
			})
			
		</script>
	</body>
</html>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有