suchen

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:091038Durchsuche

如何显示页面加载 div 直到页面加载完成？

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!

JavaScript jquery css html append 事件
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie stelle ich den Radius eines Kreises mit FabricJS ein?Nächster Artikel：Wie stelle ich den Radius eines Kreises mit FabricJS ein?

In Verbindung stehende Artikel

Mehr sehen