php 载入css就可以显示,如何在进度条加载后显示页面

1.思路：加入很多图片，以延迟加载时间，实现加载完后显示图片。定义一个外层p，覆盖住图片，在内层p中引入加载时显示的图片，让内层p居中在页面上，利用setInterval定时器设置3秒后将外层p隐藏，从而显示图片，达到加载完后显示页面的效果。

.loading{

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background: #fff;

}

.loading .pic{

width: 64px;

height: 64px;

background: url(loading.gif);

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

}

$(function(){

var loading='

$('body').append(loading);

setInterval(function(){

$('.loading').fadeOut();

},3000)

})

知识点：

p居中：

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

2.

思路：利用状态事件监听的方法：onreadystatechange，判断redayState，实现加载完后显示页面的效果

.loading{

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background: #fff;

}

.loading .pic{

width: 64px;

height: 64px;

background: url(loading.gif);

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

}

document.onreadystatechange=function(){

if(document.redayState=='complete'){

$('loading').fadeOut();

}

}

知识点：

通过onreadystatechange事件监听readyState的状态，我们只需要关心最后一个状态'complete'，当达到complete状态，说明加载成功。

3.

思路：利用CSS3实现动画效果，达到加载 完后显示页面。同样采用onreadystatechange事件监听的方法，不同的是实现了一种动态效果。

利用i标签，加入CSS样式，实现5个间隔开的矩形。利用animation每隔1.2s循环一次，无限循环。每个i标签，延时0.1s在Y方向上伸长缩短，达到动画效果。

.loading{

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background: #fff;

}

.loading .pic{

width: 50px;

height: 50px;

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

}

.loading .pic i{

display: block;

float: left;

width: 6px;

height: 50px;

background: #399;

margin: 0 2px;

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

}

.loading .pic i:nth-child(2){

-webkit-animation-delay: 0.1s;

animation-delay: 0.1s;

}

.loading .pic i:nth-child(3){

-webkit-animation-delay: 0.2s;

animation-delay: 0.2s;

}

.loading .pic i:nth-child(4){

-webkit-animation-delay: 0.3s;

animation-delay: 0.3s;

}

.loading .pic 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);

}

}

document.onreadystatechange=function(){

if(document.redayState=='complete'){

$('loading').fadeOut();

}

}

知识点：

1.scale:伸长缩短。scaleX:x方向。scaleY:y方向。

2.infinite:无限循环

3.animate-delay:0.1s 延时0.1s

4.@keyframes 动画名称{

0%{

}

100%{

}

}