页面加载动画的实现

通过css3实现页面的加载动画

效果图

js用到两个方法：

1. document.onreadystatechange 页面加载状态改变时的事件
2. document.readyState  返回当前文档的状态

body结构

<div class="loading">
	<div class="pic">
		<i></i>
		<i></i>
		<i></i>
		<i></i>
		<i></i>
	</div>
</div>
<img src="http://c.hiphotos.baidu.com/image/h%3D300/sign=c635d3753efa828bce239be3cd1f41cd/0eb30f2442a7d933b29eb303a04bd11373f0018f.jpg"/>
<img src="http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08ef778daf077b02087bf4f468.jpg"/>
<img src="http://d.hiphotos.baidu.com/image/pic/item/4034970a304e251f569f36f6aa86c9177f3e5350.jpg"/>
<img src="http://h.hiphotos.baidu.com/image/pic/item/34fae6cd7b899e51e099e61d4fa7d933c8950da0.jpg"/>
<img src="http://g.hiphotos.baidu.com/image/pic/item/d50735fae6cd7b8960afd68e022442a7d8330ef8.jpg"/>
<img src="http://e.hiphotos.baidu.com/image/pic/item/622762d0f703918f9c37edc65c3d269758eec4dc.jpg"/>
<img src="http://h.hiphotos.baidu.com/image/pic/item/d6ca7bcb0a46f21f216df320fb246b600c33ae6c.jpg"/>
<img src="http://g.hiphotos.baidu.com/image/pic/item/08f790529822720ef20be3f576cb0a46f31fabfc.jpg"/>
<img src="http://e.hiphotos.baidu.com/image/pic/item/ac4bd11373f08202fed09a3746fbfbedab641b73.jpg"/>

css

*{
				margin: 0;
				padding: 0;
			}
			.loading{
				position: fixed;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				z-index: 100;
				background: #fff;
			}
			.pic{
				width: 50px;
				height: 50px;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
			.pic i{
				display: block;
				float: left;
				width: 6px;
				height: 50px;
				margin: 0 2px;
				background: #007DDB;
				-webkit-transform: scaleY(0.4);
				    -ms-transform: scaleY(0.4);
				        transform: scaleY(0.4);
				-webkit-animation: load 1.2s infinite;
				        animation: load 1.2s infinite;
			}
			i:nth-child(1){}
			i:nth-child(2){
				-webkit-animation-delay: 0.1s;
				        animation-delay: 0.1s;
			}
			i:nth-child(3){
				-webkit-animation-delay: 0.2s;
				        animation-delay: 0.2s;
			}
			i:nth-child(4){
				-webkit-animation-delay: 0.3s;
				        animation-delay: 0.3s;
			}
			i:nth-child(5){
				-webkit-animation-delay: 0.4s;
				        animation-delay: 0.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)
				}
			}

js部分

<script type="text/javascript">
		/**
		 * document.onreadystatechange 页面加载状态改变时的事件
		 * document.readyState  返回当前文档的状态
		 */
		document.onreadystatechange = function () {
			console.log(document.readyState)
			if (document.readyState == 'complete') {
				$('.loading').fadeOut()
			}
		}
	</script>