慕课：进度条问题？？？

<!DOCTYPE HTML>
<html>
<head>
	<meta charset = "utf-8">
	<title>loading</title>
	<script type="text/css" src="src/spinner.css"></script>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style type ="text/css">
		*{
			padding:0;
			margin:0;
		}
		.page{
			background-color: lightblue;
			height: auto;
		}
		img{
			width: 100%;
			height:100%;
		}
		.loading{
			position: fixed;
			width: 100%;
			height: 100%;
			top:0;
			left: 0;
			background-color: #fff;
			z-index:10;
			
		}
		.loading .pic{
			position:inherit;
			width: 100px;
			height: 100px;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			font-size: 25px;
			line-height: 100px;
			text-align: center;
		}
		.loading .pic span{
			position: absolute;
			top: 10px;
			left: 10px;
			height: 80px;
			width: 80px;
			/*background-color:gray;*/
			border-radius: 50%;
			box-shadow: 0 3px  #666;
			animation: rotate 1s infinite linear;
			-webkit-animation: rotate 1s infinite linear;
		}
		@keyframes rotate{
			from {-webkit-transform: rotate(0deg)}
			to {-webkit-transform: rotate(360deg)}

		}
		@-webkit-keyframes rotate{
			from {transform: rotate(0deg)}
			to {transform: rotate(360deg)}
		}
	
	</style>
	<script>
		$(function(){
			var img = $("img");
			var num = 0;

			img.each(function(i){
				console.log("i:"+i);
				var oImg = new Image();
				oImg.onload = function(){
					oImg.onload=null;
					console.log("num:"+num);
					num++;
					$(".loading b").html(parseInt(num/img.size()*100)+"%");
					console.log(parseInt(num/img.size()*100)+"%");
					console.log("比较num:"+num+" i:"+i);
					if(num==i){
						$(".loading").fadeOut();
					}
				};
				oImg.src = img[i].src;
			});
		})
	</script>
</head>
<body class="page">
	<div class="loading">
		<div class="pic">
			<span>
				
			</span>
			<b>0%</b>
		</div>
	</div>
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542366013486&di=1e4fb933f5a0cdf29027846b7bb2ef87&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0142f759af7c3ea8012028a922928a.JPG%403000w_1l_2o_100sh.jpg
	">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542366080417&di=75bbca7a79b44f5ef71ed2290a866238&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D751435233%2C2123029106%26fm%3D214%26gp%3D0.jpg">
	<img src="http://p.ananas.chaoxing.com/star3/origin/54758345a310e0448134ae6d.png">
	<img src="http://pic.90sjimg.com/design/01/24/80/47/59107578095e7.png">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542960732&di=212aaefb5f9bd823df223318898a4f39&imgtype=jpg&er=1&src=http%3A%2F%2Fconnect-cdn-china2.unity.com%2Fp%2Fimages%2Fc197dc39-f62d-4b42-acb1-2f13d55c0272_Polyverse_Skies_4K___Sky_02.jpg">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542366013486&di=f4df9c0a4b47af0a920ae385df4bba5b&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0313731592180a1b5b3086ed4baaa5c.jpg">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542366013485&di=49a09d9c97b9b65b74207889ad54a12a&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F78%2F05%2F88%2F58c776a7b281b.png">
</body>
</html>
那里num和i到底是什么关系，为什么用num>=i隐藏进度条
在这里插入图片描述
慕课：进度条问题？？？

猜你喜欢
