Detaillierte Erklärung des Fortschrittsbalkens beim Laden von Webseiten (empfohlen)

(Wenn eine Webseite geladen wird, gibt es manchmal zu viel Inhalt und das Laden dauert lange. Zu diesem Zeitpunkt wird die Webseite weiß angezeigt und zeigt nichts an, was für den Benutzer eine sehr schlechte Erfahrung darstellt. Daher wird dem Benutzer im Allgemeinen, bevor die Webseite erfolgreich geladen wurde, dies in Form eines Fortschrittsbalkens angezeigt. Lassen Sie den Benutzer die Animation sehen und wissen, dass die Webseite geladen wird.)

Die gängigen Methoden sind wie folgt:

1. Timer-Fortschrittsbalken (gefälscht)

<Skripttyp="text/javascript"> 
    $(Funktion(){ 
        var wird geladen = '<div class="loading"><div class="pic"></div></div>'; 
        $("body").anhängen(laden); 
        setzeIntervall(Funktion(){ 
            $(".loading").fadeOut(); 
        },3000); 
    }); 
</Skript>

2. Holen Sie sich den Inhalt wirklich und erkennen Sie den Ladefortschrittsbalken

Um den Fortschrittsbalken entsprechend dem tatsächlichen Inhalt zu laden, werden nachfolgend zwei Wissenspunkte eingeführt:

document.onreadystatechange Ereignis, wenn sich der Seitenladestatus ändert
document.readyState gibt den aktuellen Dokumentstatus zurück
1. nicht initialisiert - noch nicht geladen
2. Laden
3. interaktiv - geladen, das Dokument und der Benutzer können mit der Interaktion beginnen
4. abgeschlossen - Laden abgeschlossen

2.1. Der obige Timercode kann wie folgt geändert werden:

Dokument.onreadystatechange=Funktion(){ 
         wenn(document.readyState=="abgeschlossen"){ 
                  $(".loading").fadeOut(); 
         } 
}

2.2. Wandeln Sie den Fortschrittsbalken in eine kleine CSS-Animation zur Anzeige um

Empfohlene Website: https://preloaders.net/ Diese Website enthält verschiedene kleine Animationen, die das Laden anzeigen

http://autoprefixer.github.io/ Präfixe online zu CSS hinzufügen

https://loading.io/ Fortschrittsbalken-Animation

2.3: Positionieren Sie den Fortschritt des Kopfes wie unten gezeigt:

Hinweis: Diese Implementierung zeigt den Ladefortschritt nicht tatsächlich an, sondern verwendet das Prinzip der Codeausführung von oben nach unten, um die Breite der Zeile an verschiedenen Stellen im Code zu ändern und am Ende der Seite die Breite auf 100 % zu bringen.

Wie unten dargestellt:

2.4 Holen Sie sich den Fortschrittsbalken beim Laden der Daten in Echtzeit

Erstellen Sie ein Bildobjekt: Bildobjektname = neues Bild();
Verwenden Sie das Onload-Ereignis. Hinweis: Das src-Attribut muss nach Onload geschrieben werden, sonst schlägt das Programm im IE fehl.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Studium oder Ihrer Arbeit helfen kann. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM!