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
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.
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.
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>
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!
So richten Sie den virtuellen Speicher am besten ein
Was passiert, wenn phpmyadmin nicht darauf zugreifen kann?
ps Vollbild-Tastenkombination beenden
prtscr-Tastenfunktion
So laden Sie HTML hoch
Welche Währung ist U-Coin?
Welche Designmuster verwendet Laravel?
So verwenden Sie die Bauchmuskelfunktion
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
