                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /常用的網(wǎng)頁(yè)加載進(jìn)度條

判斷為什么要用num>=i，感覺不對(duì)呀

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