So zeigen Sie die Seite an, nachdem der Fortschrittsbalken geladen wurde-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

So zeigen Sie die Seite an, nachdem der Fortschrittsbalken geladen wurde

一个新手

Sep 09, 2017 pm 01:01 PM

加载显示页面

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

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.

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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7481

CakePHP-Tutorial

1377

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

So entfernen Sie Nachrichten und Trendinhalte aus der Windows 11-Suche Oct 16, 2023 pm 08:13 PM

Wenn Sie in Windows 11 auf das Suchfeld klicken, wird die Suchoberfläche automatisch erweitert. Es zeigt links eine Liste der zuletzt verwendeten Programme und rechts Webinhalte an. Dort zeigt Microsoft Neuigkeiten und Trendinhalte an. Der heutige Check bewirbt Bings neue Bildgenerierungsfunktion DALL-E3, das Angebot „Chat Dragons with Bing“, weitere Informationen zu Drachen, Top-News aus dem Web-Bereich, Spielempfehlungen und den Trending Search-Bereich. Die gesamte Liste der Elemente ist unabhängig von Ihrer Aktivität auf Ihrem Computer. Während einige Benutzer die Möglichkeit, Nachrichten anzuzeigen, zu schätzen wissen, ist all dies anderswo in Hülle und Fülle verfügbar. Andere können es direkt oder indirekt als Verkaufsförderung oder sogar als Werbung einstufen. Microsoft nutzt Schnittstellen, um eigene Inhalte zu bewerben,

So kopieren Sie eine Seite in Word Feb 20, 2024 am 10:09 AM

Möchten Sie eine Seite in Microsoft Word kopieren und die Formatierung beibehalten? Dies ist eine kluge Idee, da das Duplizieren von Seiten in Word eine nützliche zeitsparende Technik sein kann, wenn Sie mehrere Kopien eines bestimmten Dokumentlayouts oder -formats erstellen möchten. Diese Anleitung führt Sie Schritt für Schritt durch den Prozess des Kopierens von Seiten in Word, unabhängig davon, ob Sie eine Vorlage erstellen oder eine bestimmte Seite in einem Dokument kopieren. Diese einfachen Anweisungen sollen Ihnen dabei helfen, Ihre Seite einfach neu zu erstellen, ohne bei Null anfangen zu müssen. Warum Seiten in Microsoft Word kopieren? Es gibt mehrere Gründe, warum das Kopieren von Seiten in Word sehr vorteilhaft ist: Wenn Sie ein Dokument mit einem bestimmten Layout oder Format kopieren möchten. Im Gegensatz dazu, die gesamte Seite von Grund auf neu zu erstellen

Fehler beim Laden des Plugins in Illustrator [Behoben] Feb 19, 2024 pm 12:00 PM

Erscheint beim Starten von Adobe Illustrator eine Meldung über einen Fehler beim Laden des Plug-Ins? Bei einigen Illustrator-Benutzern ist dieser Fehler beim Öffnen der Anwendung aufgetreten. Der Meldung folgt eine Liste problematischer Plugins. Diese Fehlermeldung weist darauf hin, dass ein Problem mit dem installierten Plug-In vorliegt, es kann jedoch auch andere Gründe haben, beispielsweise eine beschädigte Visual C++-DLL-Datei oder eine beschädigte Einstellungsdatei. Wenn dieser Fehler auftritt, werden wir Sie in diesem Artikel bei der Behebung des Problems unterstützen. Lesen Sie daher weiter unten weiter. Fehler beim Laden des Plug-Ins in Illustrator Wenn Sie beim Versuch, Adobe Illustrator zu starten, die Fehlermeldung „Fehler beim Laden des Plug-Ins“ erhalten, können Sie Folgendes verwenden: Als Administrator

Windows 11-Benutzerhandbuch: So deaktivieren Sie Werbe-Popups Sep 22, 2023 pm 07:21 PM

Das Betriebssystem Windows 11 von Microsoft zeigt mithilfe des Benachrichtigungssystems möglicherweise regelmäßig Vorschläge als Popups auf Ihrem Computer an. Das Vorschlagssystem, das ursprünglich dazu gedacht war, Benutzern Tipps und Vorschläge zur Verbesserung ihrer Windows 11-Workflows zu geben, hat sich fast vollständig in ein Werbesystem zur Bewerbung von Microsoft-Diensten und -Produkten verwandelt. Pop-ups mit Vorschlägen könnten Benutzern ein Microsoft 365-Abonnement anbieten, vorschlagen, ein Android-Telefon mit dem Gerät zu verknüpfen oder eine Backup-Lösung einzurichten. Wenn Sie diese Pop-ups stören, können Sie Ihr System so anpassen, dass sie vollständig deaktiviert werden. Die folgende Anleitung enthält Empfehlungen zum Deaktivieren von Popups auf Geräten mit dem Betriebssystem Windows 11 von Microsoft.

Stremio-Untertitel funktionieren nicht; Fehler beim Laden der Untertitel Feb 24, 2024 am 09:50 AM

Untertitel funktionieren bei Stremio auf Ihrem Windows-PC nicht? Einige Stremio-Benutzer berichteten, dass in den Videos keine Untertitel angezeigt wurden. Viele Benutzer berichteten, dass ihnen die Fehlermeldung „Fehler beim Laden der Untertitel“ angezeigt wurde. Hier ist die vollständige Fehlermeldung, die bei diesem Fehler angezeigt wird: Beim Laden der Untertitel ist ein Fehler aufgetreten. Untertitel konnten nicht geladen werden: Dies könnte ein Problem mit dem von Ihnen verwendeten Plugin oder Ihrem Netzwerk sein. Wie in der Fehlermeldung angegeben, könnte es Ihre Internetverbindung sein, die den Fehler verursacht. Überprüfen Sie daher bitte Ihre Netzwerkverbindung und stellen Sie sicher, dass Ihr Internet ordnungsgemäß funktioniert. Abgesehen davon könnte es auch andere Gründe für diesen Fehler geben, darunter ein widersprüchliches Untertitel-Add-on, nicht unterstützte Untertitel für bestimmte Videoinhalte und eine veraltete Stremio-App. wie

Wie kann ich eine Webseite schnell aktualisieren? Feb 18, 2024 pm 01:14 PM

Bei der täglichen Nutzung eines Netzwerks kommt es häufig zu Seitenaktualisierungen. Wenn wir eine Webseite besuchen, treten manchmal Probleme auf, z. B. wenn die Webseite nicht geladen wird oder nicht ordnungsgemäß angezeigt wird. Zu diesem Zeitpunkt entscheiden wir uns normalerweise dafür, die Seite zu aktualisieren, um das Problem zu lösen. Wie kann die Seite also schnell aktualisiert werden? Lassen Sie uns die Tastenkombinationen für die Seitenaktualisierung besprechen. Die Tastenkombination für die Seitenaktualisierung ist eine Methode zum schnellen Aktualisieren der aktuellen Webseite über Tastaturoperationen. In verschiedenen Betriebssystemen und Browsern können die Tastenkombinationen für die Seitenaktualisierung unterschiedlich sein. Im Folgenden verwenden wir das gebräuchliche W

So passen Sie den Standby-Modus auf dem iPhone an und bearbeiten ihn: Was ist neu in iOS 17? Sep 21, 2023 pm 04:01 PM

Standby ist eine neue Funktion im iOS 17-Update, die eine neue und verbesserte Möglichkeit bietet, auf Informationen zuzugreifen, wenn Ihr Telefon schnell inaktiv ist. Mit StandBy können Sie bequem die Uhrzeit überprüfen, bevorstehende Ereignisse anzeigen, Ihren Kalender durchsuchen, Wetteraktualisierungen für Ihren Standort abrufen und vieles mehr. Nach der Aktivierung wechselt das iPhone intuitiv in den Standby-Modus, wenn es während des Ladevorgangs auf Querformat eingestellt wird. Diese Funktion eignet sich perfekt für kabellose Ladestationen wie Ihren Nachttisch oder wenn Sie Ihr iPhone während der täglichen Aufgaben nicht aufladen können. Sie können damit durch verschiedene im Standby-Modus angezeigte Widgets wischen, um auf verschiedene Informationssätze aus verschiedenen Anwendungen zuzugreifen. Möglicherweise möchten Sie diese Widgets jedoch ändern oder einige sogar löschen, je nach Ihren Vorlieben und den Informationen, die Sie häufig benötigen. Also lasst uns eintauchen

Gründe und Lösungen für die Sperrung des Desktop-Layouts Feb 19, 2024 pm 06:08 PM

Was passiert, wenn das Desktop-Layout gesperrt ist? Bei der Verwendung des Computers kann es manchmal vorkommen, dass das Desktop-Layout gesperrt ist. Dieses Problem bedeutet, dass wir die Position von Desktop-Symbolen nicht frei anpassen oder den Desktop-Hintergrund ändern können. Was genau passiert also, wenn es heißt, dass das Desktop-Layout gesperrt ist? 1. Das Desktop-Layout und die Sperrfunktionen verstehen. Zunächst müssen wir die beiden Konzepte Desktop-Layout und Desktop-Sperre verstehen. Unter Desktop-Layout versteht man die Anordnung verschiedener Elemente auf dem Desktop, darunter Verknüpfungen, Ordner, Widgets usw. wir können frei sein

See all articles