判断为什么要用num>=i,感觉不对呀

来源:4-1 实时获取加载数据的进度条

一只肥鹤

2018-11-17 10:33

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


写回答 关注

1回答

  • 传影
    2018-12-13 14:50:54

    表示所有图片已加载完成

常用的网页加载进度条

通过课程,让你学习到网页中常见的进度加载的实现方式.

32872 学习 · 81 问题

查看课程

相似问题