Heim > Artikel > Web-Frontend > Wie kann ich das Seitenlade-Div anzeigen, bis die Seite geladen ist?
Wie kann ich das Seitenlade-Div anzeigen, bis die Seite geladen ist?
- 王林nach vorne
- 2023-09-11 10:17:09962Durchsuche
Anstatt beim Laden der Seite einen kompletten weißen oder schwarzen Bildschirm anzuzeigen, wird eine Ladeanzeige angezeigt, was auch das Benutzererlebnis der App verbessert.
Jetzt gibt es Bibliotheken, die Ladeindikatoren anzeigen können. Wir können jedoch mithilfe von HTML und CSS ein benutzerdefiniertes Ladeindikator-Div erstellen.
In diesem Tutorial verwenden wir HTML, CSS und JavaScript, um das Seitenlade-Div anzuzeigen, bis die Seite geladen wird
Verwenden Sie das Ereignis onreadystatechange, um beim Laden der Seite eine Ladeanzeige anzuzeigen
In JavaScript wird jedes Mal, wenn sich der Status der Webseite ändert, das Ereignis onreadystatechange ausgelöst. Der erste Status ist „interaktiv“, was bedeutet, dass die Webseite interagiert und mit dem Laden begonnen hat. Die zweite Stufe ist „Abgeschlossen“, das heißt, die Webseite wurde erfolgreich geladen.
So können wir in allen anderen Zuständen den Textkörper ausblenden und die Ladeanzeige anzeigen, und im Status „Fertig“ können wir die Ladeanzeige ausblenden und den Textkörper anzeigen.
Grammatik
Benutzer können der folgenden Syntax folgen, um die Ladeanzeige basierend auf dem Status des Dokuments ein- und auszublenden.
document.onreadystatechange = function () {
if (document.readyState !== "complete") {
// show loading indicator and hide body
} else {
// show body, and hide loading indicator
}
};
In der obigen Syntax rufen wir diese Funktion immer dann auf, wenn sich der Status des Dokuments ändert. Es prüft, ob der Status „Abgeschlossen“ ist, blendet dann die Ladeanzeige aus und zeigt den Textkörper an.
Beispiel
Im folgenden Beispiel haben wir ein Div mit dem Div „loading_indicator“ erstellt und etwas CSS angewendet, um daraus einen kreisförmigen Ladeindikator zu machen.
In JavaScript verwenden wir das Ereignis onreadystatechange. Diese Funktion wird immer dann ausgeführt, wenn sich der Zustand ändert. In der Funktion verwenden wir die Eigenschaft „readyState“ des Dokuments, um den aktuellen Status des Dokuments abzurufen. Wenn der aktuelle Status des Dokuments „Abgeschlossen“ lautet, können wir auf die Ladeanzeige zugreifen und diese ausblenden und den gesamten Dokumenttext anzeigen. Andernfalls können wir die Ladeanzeige einblenden und den Dokumenttext ausblenden.
<html>
<head>
<style>
#loading_indicator {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 10px solid grey;
border-radius: 50%;
border-top: 10px solid blue;
width: 100px;
height: 100px;
animation: spinIndicator 1s linear infinite;
}
@keyframes spinIndicator {
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h2>Using the <i> onreadystatechange event </i> to show page loading div in JavaScript.</h2>
<div id = "loading_indicator"> </div>
<h3> Page Loaded successfully.</h3>
<img src = "https://www.tutorialspoint.com/static/images/logo-color-footer.png" alt = "image">
<script>
document.onreadystatechange = function () {
if (document.readyState !== "complete") {
document.querySelector("body").style.visibility = "hidden";
document.getElementById("loading_indicator").style.visibility = "visible";
} else {
setTimeout(() => {
document.getElementById("loading_indicator").style.display ="none";
document.querySelector("body").style.visibility = "visible";
}, 3000)
}
};
</script>
</body>
</html>
Beispiel
Im folgenden Beispiel verwenden wir jQuery, um einen Ladeindikator anzuzeigen, wenn die Seite geladen wird. Wir haben dem Dokumentkörper HTML und CSS hinzugefügt.
In JQuery verwenden wir die Methode append(), um den Ladeindikator an den Dokumentkörper anzuhängen. Anschließend überprüfen wir mit dem „load“-Ereignis, ob die Seite geladen wurde und entfernen auf dieser Grundlage die Ladeanzeige von der Webseite.
<html>
<head>
<style>
#indicator {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 10px solid grey;
border-radius: 50%;
border-top: 10px solid red;
width: 100px;
height: 100px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h2>Using the <i> JQuery load event </i> to show page loading div in JavaScript.</h2>
<h3>Page Loaded successfully.</h3>
<img src = "https://www.tutorialspoint.com/static/images/logo-color-footer.png" alt = "image">
<script>
$('body').append('<div style = "" id = "indicator"> <div class="loader"> </div> </div>');
$(window).on('load', function () {
setTimeout(removeLoader, 2000);
});
function removeLoader() {
$("#indicator").fadeOut(1000, function () {
$("#indicator").remove();
});
}
</script>
</body>
</html>
Wir haben gelernt, JavaScript und jQuery zu verwenden, um beim Laden der Seite einen Ladeindikator anzuzeigen. Im ersten Beispiel verwenden wir das onreadystatechange-Ereignis von JavaScript, um den Ladeindikator basierend darauf, ob die Seite geladen ist, anzuzeigen und auszublenden.
Im zweiten Beispiel verwenden wir das Ladeereignis von JQuery, um den Ladeindikator anzuzeigen und auszublenden
Das obige ist der detaillierte Inhalt vonWie kann ich das Seitenlade-Div anzeigen, bis die Seite geladen ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!