利用js实现页面等待效果

我们经常会看到许多页面有CSS3的loading效果，一般都是利用ajax的页面加载过渡动画来实现的，其实，光利用js和css也可以实现

首先，我们需要找到合适的CSS3loading效果

这里我就用我另一站的loading来做例子

HTML：

<div id="loading" class="spinner">

<div class="rect1"></div>

<div class="rect2"></div>

<div class="rect3"></div>

<div class="rect4"></div>

<div class="rect5"></div>

</div>

CSS：

.spinner {

color:#fff;position:absolute; top:50%; left:50%; margin:50px 0 0 30px;

position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000

margin: 100px auto;

width: 50px;

height: 60px;

text-align: center;

font-size: 10px;

}



.spinner > div {

background-color: #67CF22;

height: 100%;

width: 6px;

display: inline-block;



-webkit-animation: stretchdelay 1.2s infinite ease-in-out;

animation: stretchdelay 1.2s infinite ease-in-out;

}



.spinner .rect2 {

-webkit-animation-delay: -1.1s;

animation-delay: -1.1s;

}



.spinner .rect3 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}



.spinner .rect4 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}



.spinner .rect5 {

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}



@-webkit-keyframes stretchdelay {

0%, 40%, 100% { -webkit-transform: scaleY(0.4) }

20% { -webkit-transform: scaleY(1.0) }

}



@keyframes stretchdelay {

0%, 40%, 100% {

transform: scaleY(0.4);

-webkit-transform: scaleY(0.4);

} 20% {

transform: scaleY(1.0);

-webkit-transform: scaleY(1.0);

}

}

::-webkit-scrollbar { width: 8px;}::-webkit-scrollbar-button { width: 8px; height:5px;}::-webkit-scrollbar-track { background:#eee; border: thin solid lightgray; box-shadow: 0px 0px 3px #dfdfdf inset; border-radius:10px;}::-webkit-scrollbar-thumb { background:#999; border: thin solid gray; border-radius:10px;}::-webkit-scrollbar-thumb:hover { background:#7d7d7d;}

效果是这样的



然后再加入控制div隐藏的js代码

function lick(){

	    $("#loading").hide();

}

window.setTimeout("lick()",3000);

其中的3000代表loading在页面加载完成后三秒隐藏