php 载入css就可以显示,如何在进度条加载后显示页面
1.思路：加入很多圖片，以延遲加載時間，實現(xiàn)加載完后顯示圖片。定義一個外層p，覆蓋住圖片，在內(nèi)層p中引入加載時顯示的圖片，讓內(nèi)層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.
思路：利用狀態(tài)事件監(jiān)聽的方法：onreadystatechange，判斷redayState，實現(xiàn)加載完后顯示頁面的效果
.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事件監(jiān)聽readyState的狀態(tài)，我們只需要關心最后一個狀態(tài)'complete'，當達到complete狀態(tài)，說明加載成功。
3.
思路：利用CSS3實現(xiàn)動畫效果，達到加載 完后顯示頁面。同樣采用onreadystatechange事件監(jiān)聽的方法，不同的是實現(xiàn)了一種動態(tài)效果。
利用i標簽，加入CSS樣式，實現(xiàn)5個間隔開的矩形。利用animation每隔1.2s循環(huán)一次，無限循環(huán)。每個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:無限循環(huán)
3.animate-delay:0.1s 延時0.1s
4.@keyframes 動畫名稱{
0%{
}
100%{
}
}
總結
以上是生活随笔為你收集整理的php 载入css就可以显示,如何在进度条加载后显示页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php 字符串匹配 like,Think
- 下一篇： 本草药王剧情介绍