(Wenn die Webseite geladen wird, ist der Inhalt manchmal zu viel und wurde geladen und wartet. Zu diesem Zeitpunkt zeigt die Webseite, dass Weiß nichts anzeigt. Die Erfahrung des Benutzers ist ziemlich schlecht. Daher die Form des Streifens wird für Benutzer angezeigt.
Die gemeinsamen Wege sind wie folgt:
1. Die Fortschrittsleiste des Timers (Fälschung) <skript type = text/javaScript> $ (function () {var ladering = '<div class = lade> <div class = pic> </div> </div>'; $ (Körper). G); function () {$ (. Laden) 2. Realer Akquisitionsinhalte, realisieren Sie die Lade -FortschrittsleisteUm die Fortschrittsleiste gemäß den tatsächlichen Inhalten zu laden, werden nachstehend zwei Wissenspunkte eingeführt:
document.onReadyStatechange Seite Lade Statusereignis Ereignisänderungen Änderungen
Dokument.ReadyState gibt den Status des aktuellen Dokuments zurück
1. nicht initialisierte -nicht mit dem Laden begonnen
2. Laden -
3.. Interaktives Laden, Dokument und Benutzer können mit der Interaktion beginnen
V.
2.1. document.onReadyStatechange = function () {if (documeted.readyState == complete) {$ (. Laden) .Fadeout ();}} 2.2.Empfohlene Website: https://preloaders.net/ Diese Website enthält verschiedene kleine Animationen, die das Laden von Laden anzeigen
http://autoprefixer.github.io/, um CSS online Präfixe hinzuzufügen
https://loading.io/ Progressive kleine Animation
2.3: Der Fortschritt ist im Kopf positioniert, wie unten gezeigt:HINWEIS: Diese Erkenntnis ist nicht die tatsächliche Anzeige des Ladefortschritts, sondern verwendet: das Prinzip der Codeausführung von oben nach unten
Ändern Sie in verschiedenen Positionen des Codes die Breite der Zeilen.
Wie unten gezeigt:
2.4 Erhalten Sie die Fortschrittsleiste zum Laden von Daten in EchtzeitBildobjekte erstellen: Bildobjektname = new Image ();
Verwendung: Online -Veranstaltung
Hinweis: Das SRC -Attribut muss hinter dem Onload geschrieben werden, andernfalls macht das Programm einen Fehler im IE
Das oben genannte Inhalt dieses Artikels.