Home > Article > Web Front-end > How to show page after progress bar is loaded
How to show page after progress bar is loaded
- 一个新手Original
- 2017-09-09 13:01:402432browse
1. Idea: Add many pictures to delay the loading time and display the pictures after loading. Define an outer layer p to cover the picture, introduce the picture displayed when loading into the inner layer p, center the inner layer p on the page, use the setInterval timer to set the outer layer p after 3 seconds, and then hide the outer layer p to display the picture. Display the effect of the page after loading.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">
<img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">
<img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">
<img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">
<img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
var loading='<p class="loading"><p class="pic"></p></p>';
$('body').append(loading);
setInterval(function(){
$('.loading').fadeOut();
},3000)
})
</script>
</body>
</html>Knowledge points:
p Centering:
position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;
2.
Idea: Use the method of state event monitoring: onreadystatechange, judge redayState, and achieve the effect of displaying the page after loading
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<p class="loading">
<p class="pic"></p>
</p>
<img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">
<img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">
<img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">
<img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">
<img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
document.onreadystatechange=function(){
if(document.redayState=='complete'){
$('loading').fadeOut();
}
}
</script>
</body>
</html>Knowledge points:
Monitor the status of readyState through the onreadystatechange event. We only need to care about the last status 'complete'. When the complete status is reached, it means the loading is successful.
3.
Idea: Use CSS3 to achieve animation effects and display the page after loading. The same method of monitoring the onreadystatechange event is used, but the difference is that a dynamic effect is achieved.
Use the i tag and add CSS styles to achieve 5 spaced rectangles. Use animation to loop every 1.2s, infinite loop. Each i tag stretches and shortens in the Y direction with a delay of 0.1s to achieve an animation effect.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.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);
}
}
</style>
</head>
<body>
<p class="loading">
<p class="pic">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</p>
</p>
<img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">
<img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">
<img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">
<img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">
<img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
document.onreadystatechange=function(){
if(document.redayState=='complete'){
$('loading').fadeOut();
}
}
</script>
</body>
</html>Knowledge points:
1.scale: elongation and contraction. scaleX:x direction. scaleY: y direction.
2.infinite: infinite loop
3.animate-delay:0.1s delay 0.1s
4.@keyframes animation name{
0%{
}
100%{
}
}
The above is the detailed content of How to show page after progress bar is loaded. For more information, please follow other related articles on the PHP Chinese website!