Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
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

一个新手
Freigeben： 2017-09-09 13:01:40
Original
2518 Leute haben es durchsucht

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=&#39;<p class="loading"><p class="pic"></p></p>&#39;;
		$(&#39;body&#39;).append(loading);
		setInterval(function(){
			$(&#39;.loading&#39;).fadeOut();
		},3000)
	})
</script>
</body>
</html>
Nach dem Login kopieren

Wissenspunkte:

p Zentrierung: 

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
Nach dem Login kopieren

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==&#39;complete&#39;){
			$(&#39;loading&#39;).fadeOut();
		}
	}
</script>
</body>
</html>
Nach dem Login kopieren

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==&#39;complete&#39;){
			$(&#39;loading&#39;).fadeOut();
		}
	}
</script>
</body>
</html>
Nach dem Login kopieren

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!

Verwandte Etiketten：
加载 显示 页面
Quelle：php.cn
Vorheriger Artikel：So steuern Sie die Schriftbreite in HTML Nächster Artikel：So implementieren Sie die adaptive Funktion des Hintergrundbilds auf einem Computer/Mobiltelefon in CSS
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Die Seite kann plötzlich weder CSS noch Bootstrap abrufen Ich entwickle also eine Seite, einen Teil davon habe ich gestern gemacht und es hat großar...
Aus 2024-04-06 21:58:04
0
1
800
Wie löst man das Rendern (mit Filter und Paginierung) für die Sortiermethode in React aus? Hier ist meine Sort.js-Stilkomponente: <SortWrapper><SortText>SortBy</SortT...
Aus 2024-04-06 21:28:37
0
1
2257
Wie kann man schwebende Elemente in CSS vertikal statt horizontal stapeln lassen? Ich versuche, eine Webseite mit zwei Spalten zu erstellen, mit Hauptinhalt auf der einen S...
Aus 2024-04-06 20:45:26
0
2
386
So lösen Sie das mysteriöse Leerzeichen am unteren Rand der Seite in CSS Ich versuche, mit Bootstrap und D3 eine einfache Webseite zu erstellen, weiß aber nicht, w...
Aus 2024-04-06 20:22:15
0
1
454
MySQL ruft Daten aus mehreren Tabellen ab Ich habe eine Tabelle „eg_design“, die die folgenden Spalten enthält: und eine Tabelle „eg...
Aus 2024-04-06 18:42:44
0
2
479
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage