Heim >Web-Frontend >CSS-Tutorial >So zeigen Sie die Seite an, nachdem der Fortschrittsbalken geladen wurde
So zeigen Sie die Seite an, nachdem der Fortschrittsbalken geladen wurde
- 一个新手Original
- 2017-09-09 13:01:402511Durchsuche
1. Idee: Fügen Sie viele Bilder hinzu, um die Ladezeit zu verzögern und die Bilder nach dem Laden anzuzeigen. Definieren Sie eine äußere Ebene p, um das Bild abzudecken, fügen Sie das beim Laden angezeigte Bild in die innere Ebene p ein, zentrieren Sie die innere Ebene p auf der Seite, verwenden Sie den setInterval-Timer, um die äußere Ebene p nach 3 Sekunden festzulegen, und blenden Sie dann die äußere Ebene aus Ebene p, um das Bild nach dem Laden anzuzeigen.
<!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>Wissenspunkte:
p Zentrierung:
position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;
2.
Idee: Verwenden Sie die Methode zur Überwachung von Zustandsereignissen: onreadystatechange, beurteilen Sie redayState und erzielen Sie den Effekt, dass die Seite nach dem Laden angezeigt wird
<!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>Wissenspunkte:
Überwachen Sie den Status von readyState über das Ereignis onreadystatechange. Wir müssen uns nur um den letzten Status „abgeschlossen“ kümmern. Wenn der vollständige Status erreicht ist, bedeutet dies, dass der Ladevorgang erfolgreich ist.
3.
Idee: Verwenden Sie CSS3, um Animationseffekte zu erzielen und die Seite nach dem Laden anzuzeigen. Es wird die gleiche Methode zur Überwachung des onreadystatechange-Ereignisses verwendet, der Unterschied besteht jedoch darin, dass ein dynamischer Effekt erzielt wird.
Verwenden Sie das i-Tag und fügen Sie CSS-Stile hinzu, um 5 beabstandete Rechtecke zu erhalten. Verwenden Sie die Animation, um alle 1,2 Sekunden eine Endlosschleife zu erstellen. Jedes i-Tag wird mit einer Verzögerung von 0,1 s in Y-Richtung gedehnt und verkürzt, um einen Animationseffekt zu erzielen.
<!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>Wissenspunkte:
1.Skala: Dehnung und Verkürzung. ScaleX:x-Richtung. scaleY: y-Richtung.
2.infinite: Endlosschleife
3.animate-delay:0.1s Verzögerung 0.1s
4.@keyframes Animationsname{
0 %{
}
100 %{
}
}
Das obige ist der detaillierte Inhalt vonSo zeigen Sie die Seite an, nachdem der Fortschrittsbalken geladen wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!