Show -Effekt:
1) Beim Klicken auf Laden führt die Simulation asynchrones Laden durch. Der Browser ist blockiert. Die Fortschrittsleiste erscheint.
Implementierungsideen:
1. Wenn der Benutzer auf die Schaltfläche Laden klickt, um eine asynchrone Anforderung auszuführen. Die Lastleiste wird angezeigt, wenn die Methode aufgerufen wird.
2. Wie kann man die Fortschrittsleiste implementieren?
1) Fügen Sie eine neue Div zum Dokument hinzu.body. Den Browser überschreiben. Setzen Sie den Hintergrund wird grau ausgegraut. Z-Index = 999. Der Benutzer kann den Schnittstellenwert beim Laden nicht ändern.
2) Dokumentieren Sie eine dynamische DIV hinzu.body.
Code -Implementierung:
Main.html:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> </title> <script src = "lade.js" charset = "utf-8"> </script> <link rel = "styleSheet" href = "loading.css onclick = "showing ()"> laden </button> </body> </html>
Loading.js:
Funktion showing () {var overdiv = document.createelement ("div"); var loelingdiv = document.createelement ("div"); var kindiv1 = document.createelement ("div"); var kindiv2 = document.createelement ("div"); var childdiv3 = document.createelement ("div"); overdiv.classlist.add ('Over'); loaderingdiv.classlist.add ('Spinner'); Childdiv1.classList.add ('Bounce1') ChildDiv2.classList.Add ('Bounce2') Childdiv3.classlist.add.add.add.add ('boung3') Adingdiv.AppendChild (Childdiv2); laderingdiv.Appendchild (ChildDIV3); document.body.appendchild (overdiv); document.body.Appendchild (ladediv) setTimeout (function () {document.body.removechild (overdiv); document.body.removeChild (ladediv)}, 5000);}Laden.css
.spinnner {width: 150px; text-align: mitte; links: 50%; ober: 50%; Position: absolut; z-Index: 1000;}. Über {Breite: 100%; Höhe: 100%; Z-Index: 998; Hintergrundfarbe: Grau; 30px; Hintergrundfarbe: #67cf22; Border-Radius: 100%; Anzeige: Inline-Block; -Webkit-Animation: Bouncedelay 1,4S Infinite Locker-In-Out; Beide;}. Spinner .Bounce1 {-webkit-Animation-Delay: -0,32s; Animation-Delay: -0,32s;}. Spinner .Bounce2 {-webkit-Animation-Delay: -0.16s; Animation-Delay: -0,16S; {-webkit-transform: scale (0,0)} 40% {-webkit-transform: scale (1,0)}}@keyframes Bouncedelay {0%, 80%, 100% {Transformation: Skala (0,0);Zusammenfassen:
1. Die Methode kann angehoben werden. Keulen Sie die AJAX-Anfrage einmal erneut auf. Implementieren Sie die automatische Balkenmethode, wenn Sie die AJAX -Anforderung aufrufen.
2. Wenn es Winkel ist, bietet Angular Methoden zur Überwachung von HTTP -Aufrufen. Rufen Sie einfach die Fortschrittsbalken -Methode auf, wenn Sie die HTTP -Ausführungsanforderungen überwachen. Sie müssen nicht jedes Mal, wenn Sie HTTP -Anrufe ausführen, die Fortschrittsbalkenmethode aufrufen und HTTP -Ausführungsanforderungen überwachen. Es ist nicht erforderlich, die Fortschrittsbalkenmethode jedes Mal selbst aufzurufen, wenn Sie HTTP ausführen.
Der obige Inhalt bezieht sich auf die vom Herausgeber vorgelegte JS -Asynchron -Lade -Fortschrittsleiste. Ich hoffe, es wird für alle hilfreich sein!