每日小練習之JQuery網頁加載進度條（part3）

1：當圖片加載完後loading消失

HTML

<div class="loading">
			<div class="picc">	
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
			</div>
		</div>
		<div class="img">
			<img src="img\7640717475412ec189396ea6c73a66921548819501.jpg"/>
			<img src="img\7b5085f583e732a0c5de3ef183f5e6811553155542.jpg"/>
			<img src="img\25a81eee1ea53311c4947c82c091a09e1551845761.jpg"/>
		</div>

jq：

document.onreadystatechange=function(){
				if(document.readyState=="complete"){
					$(".loading").fadeOut()
				}
			}

總css

*{
	padding:0;
	margin:0;
	box-sizing:border-box;
}
.loading {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:99;
	background:#FFF;
}
.piccc {
	width:0%;
	height:3px;
	background:brown;
	position:absolute;
	top:0;
	left:0;
}
.loading .loads>span {
	width:80px;
	height:80px;
	border-radius:50%;
	display:block;
	position:absolute;
	top:10px;
	left:10px;
	-webkit-box-shadow:0 3px 2px #F00;
	        box-shadow:0 3px 2px #F00;
	-webkit-animation:loads 2s infinite linear;
	        animation:loads 2s infinite linear;
}
@-webkit-keyframes loads{
	0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes loads{
	0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
.loading .loads {
	width:100px;
	height:100px;
	font-size:24px;
	line-height:100px;
	text-align:center;
	color:#000;
	
}
.picc {
	width:40px;
	height:50px;
}
.picc,.pic,.loads {		
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;	
}
.pic {	
	background:url(../img/8da4edc6c8295738442eb4167fd028660ca7b3d55ac74-qKkl85_fw658.gif) no-repeat;
	background-size:300px 200px;
	width:300px;
	height:200px;
}
.img {
	width:100%;
	height:auto;
	overflow:hidden;
}
.img img {
	width:100%;
	height:auto;
}
.loading .picc>i {
	width:5px;
	height:50px;
	display:block;
	float:left;
	background:brown;
	-webkit-transform: scaleY(0.4);
	    -ms-transform: scaleY(0.4);
	        transform: scaleY(0.4);
	-webkit-animation:load 2s infinite;
	        animation:load 2s infinite;
	margin-right:2px;
}
.loading .picc>i:nth-child(2) {
	-webkit-animation-delay: .1s;
	        animation-delay: .1s;
}
.loading .picc>i:nth-child(3) {
	-webkit-animation-delay: .2s;
	        animation-delay: .2s;
}
.loading .picc>i:nth-child(4) {
	-webkit-animation-delay: .3s;
	        animation-delay: .3s;
}
.loading .picc>i:nth-child(5) {
	-webkit-animation-delay: .4s;
	        animation-delay: .4s;
}
@-webkit-keyframes load{
	0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}
	20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
}
@keyframes load{
	0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}
	20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
}

栗子二：圖片gif的loading進度條（css見上面）

HTML：

	<div class="img">
			<img src="img\7640717475412ec189396ea6c73a66921548819501.jpg"/>
			<img src="img\7b5085f583e732a0c5de3ef183f5e6811553155542.jpg"/>
			<img src="img\25a81eee1ea53311c4947c82c091a09e1551845761.jpg"/>
		</div>

jq

$(function(){
				var loading='<div class="loading"><div class="pic"></div></div>'
				$("body").append(loading);
				setInterval(function(){
					$(".loading").fadeOut()
				},3000)
			})

栗子三：数字加载loading

HTML：

<div class="loading">
			<div class="loads">
				<span></span>
				<b>0%</b>
			</div>
		</div>
		<div class="img">
			<img src="img\7640717475412ec189396ea6c73a66921548819501.jpg"/>
			<img src="img\7b5085f583e732a0c5de3ef183f5e6811553155542.jpg"/>
			<img src="img\25a81eee1ea53311c4947c82c091a09e1551845761.jpg"/>
		</div>

jq

$(function(){
				var img = $("img");
				var num=0;
				img.each(function(i){
					var oImg = new Image();
					oImg.onload = function(){
						oImg.onload = null;
						num++;
						$(".loading .loads b").html(parseInt(num/$("img").size()*100)+"%");
						if(num>=i){					
							$(".loading").fadeOut();
						}				
					}
					oImg.src=img[i].src;
				})
			})

例子四：顶部一条线加载

<div class="loading"><div class="piccc"></div></div>
		<header>
			<img src="http://www.cbecm.com/Public/img/Guide/guidebanner3.jpg"/>
		</header>
		<script>
			$(".loading .piccc").animate({width:"10%"},100)
		</script>
		<section class="art">
			<img src="http://www.cbecm.com/Public/img/Home/new/newbanner.jpg"/>
		</section>
		<script>
			$(".loading .piccc").animate({width:"20%"},200)
		</script>
		<section class="aside">
			<img src="http://www.cbecm.com/Public/img/News/active.jpg"/>
		</section>
		<script>
			$(".loading .piccc").animate({width:"30%"},200)
		</script>
		<section class="one">
			<img src="http://www.cbecm.com/Public/img/News/huodong.jpg"/>
		</section>
		<script>
			$(".loading .piccc").animate({width:"40%"},200)
		</script>
		<section class="two">
			<img src="http://www.cbecm.com/Public/img/News/fenxi.jpg"/>
		</section>
		<script>
			$(".loading .piccc").animate({width:"50%"},200)
		</script>
		<section class="thr">
			<img src="http://www.cbecm.com/Public/img/News/saishi.jpg"/>
			<img src="http://www.cbecm.com/Public/img/News/gongnue.jpg"/>
		</section>
		<script>
			$(".loading .piccc").animate({width:"70%"},200)
		</script>
		<footer>
			<img src="http://www.cbecm.com/Public/img/News/game.jpg"/>
			<img src="http://www.cbecm.com/Public/img/Anchor/hd-banner.jpg"/>
			<img src="http://www.cbecm.com/Public/img/Anchor/hd-banner.jpg"/>
		</footer>
		<script>
			$(".loading .piccc").animate({width:"100%"},200,function(){
				$(".loading").fadeOut();
			})
		</script>