Welche Methoden gibt es für Lazy Loading?

Zu den Methoden des verzögerten Ladens gehören das verzögerte Laden von Bildern, das verzögerte Laden von Videos, das verzögerte Laden von Skriptdateien, das verzögerte Laden von Daten usw. Detaillierte Einführung: 1. Das verzögerte Laden von Bildern ist eine gängige Implementierungsmethode für das verzögerte Laden. Beim Laden der Seite werden nur die Bilder im sichtbaren Bereich geladen, und die Bilder in anderen Bereichen werden in Form von Platzhaltern angezeigt Die Seite zum Laden des echten Bildes kann durch die Verwendung der vorhandenen JavaScript-Bibliothek oder des benutzerdefinierten Codes 2 erreicht werden. Das verzögerte Laden von Videos erfolgt auf ähnliche Weise wie das verzögerte Laden von Bildern, z die Seite wird geladen usw.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

Lazy Loading ist ein Programmiermuster, das häufig zur Optimierung des Ressourcenladens und der Seitenleistung verwendet wird. Das Ziel dieser Strategie besteht darin, bestimmte Ressourcen oder Daten nur dann zu laden, wenn sie benötigt werden, wodurch das Laden aller Ressourcen zu Beginn vermieden wird, um die Ladezeit der Seite zu verkürzen und die Seitenleistung zu verbessern. Lazy Loading wird normalerweise zum Laden von Ressourcen wie Bildern, Videos, Skriptdateien und Daten verwendet.

Es gibt verschiedene Methoden zum verzögerten Laden:

1. Das verzögerte Laden von Bildern

Das verzögerte Laden von Bildern ist eine gängige Implementierungsmethode für das verzögerte Laden. Beim Laden der Seite werden nur Bilder im sichtbaren Bereich geladen und Bilder in anderen Bereichen werden als Platzhalter dargestellt. Wenn der Benutzer die Seite zur Bildposition scrollt, wird das echte Bild geladen. Das verzögerte Laden von Bildern kann mithilfe vorhandener JavaScript-Bibliotheken (z. B. imagesLoaded) oder benutzerdefiniertem Code implementiert werden.

Die grundlegenden Schritte zum Implementieren des verzögerten Ladens von Bildern sind wie folgt:

(1) Fügen Sie ein Platzhalterbild in die Seite ein. Die Größe und Position des Platzhalterbilds stimmen mit dem tatsächlichen Bild überein.

(2) Verwenden Sie JavaScript-Code, um Scroll-Ereignisse abzuhören und die Position des aktuell sichtbaren Bereichs zu bestimmen.

(3) Wenn der Benutzer zum Speicherort des Platzhalterbilds scrollt, rufen Sie die URL des tatsächlichen Bilds über eine AJAX-Anfrage ab und fügen Sie das Bild in die Seite ein.

(4) Verwenden Sie JavaScript-Code, um das Ladeereignis des Bildes zu überwachen. Wenn das Bild geladen wird, löschen Sie das Platzhalterbild.

2. Video-Lazy-Loading

Die Implementierung des Video-Lazy-Loadings ähnelt dem Lazy-Loading der Seite. Beim Laden der Seite wird nur der Videoplayer im sichtbaren Bereich geladen und andere Bereiche werden im Formular angezeigt von Platzhaltern. Wenn der Benutzer auf der Seite zum Videospeicherort scrollt, wird die Videodatei geladen. Die Implementierung des verzögerten Ladens von Videos kann durch die Verwendung vorhandener JavaScript-Bibliotheken oder benutzerdefinierten Codes erreicht werden.

Die grundlegenden Schritte zum Implementieren des verzögerten Ladens von Videos sind wie folgt:

(1) Fügen Sie einen Platzhalter-Videoplayer in die Seite ein. Die Größe und Position des Platzhalter-Videoplayers entsprechen denen des tatsächlichen Videoplayers.

(2) Verwenden Sie JavaScript-Code, um Scroll-Ereignisse abzuhören und die Position des aktuell sichtbaren Bereichs zu bestimmen.

(3) Wenn der Benutzer zum Speicherort des Platzhalter-Videoplayers scrollt, rufen Sie die URL der tatsächlichen Videodatei über eine AJAX-Anfrage ab und fügen Sie die Videodatei in die Seite ein.

(4) Verwenden Sie JavaScript-Code, um das Ladeereignis der Videodatei zu überwachen. Wenn die Videodatei geladen wird, löschen Sie den Platzhalter-Videoplayer.

3. Verzögertes Laden von Skriptdateien

Verzögertes Laden von Skriptdateien kann das Laden von Skriptdateien am Ende der Seite verzögern, um ein Blockieren der Darstellung der Seite zu vermeiden. Durch die Verwendung von Ereignis-Listenern können Skriptdateien nur bei Bedarf geladen werden. Die Implementierung des verzögerten Ladens von Skriptdateien kann durch die Verwendung vorhandener JavaScript-Bibliotheken oder benutzerdefinierten Codes erreicht werden.

Die grundlegenden Schritte zum Implementieren des verzögerten Ladens von Skriptdateien sind wie folgt:

(1) Fügen Sie das Platzhalter-Tag der Skriptdatei unten auf der Seite ein.

(2) Verwenden Sie JavaScript-Code, um auf bestimmte Ereignisse zu warten (z. B. Klickereignisse). Wenn das Ereignis auftritt, rufen Sie die URL der Skriptdatei über eine AJAX-Anfrage ab und fügen Sie die Skriptdatei in die Seite ein.

(3) Verwenden Sie JavaScript-Code, um das Ladeabschlussereignis der Skriptdatei zu überwachen und die entsprechende Funktion auszuführen, wenn die Skriptdatei geladen wird.

4. Verzögertes Laden von Daten

Verzögertes Laden von Daten kann nur einen Teil der Daten laden, wenn die Seite initialisiert wird, und andere Daten nur dann laden, wenn der Benutzer sie benötigt. Diese Methode kann die Datenmenge für die Seiteninitialisierung reduzieren und die Seitenleistung verbessern. Die Implementierung des verzögerten Ladens von Daten kann durch die Verwendung vorhandener JavaScript-Bibliotheken oder benutzerdefinierten Codes erreicht werden.

Die grundlegenden Schritte zum Implementieren des verzögerten Ladens von Daten sind wie folgt:

(1) Fügen Sie einen Platzhaltercontainer für Daten in die Seite ein.

(2) Verwenden Sie JavaScript-Code, um auf bestimmte Ereignisse zu warten (z. B. Scroll-Ereignisse oder Klick-Ereignisse). Wenn das Ereignis auftritt, rufen Sie die URL der Daten über eine AJAX-Anfrage ab und fügen Sie die Daten in die Seite ein.

(3) Verwenden Sie JavaScript-Code, um das Abschlussereignis des Datenladens zu überwachen und die entsprechende Funktion auszuführen, wenn der Datenladevorgang abgeschlossen ist.

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es für Lazy Loading?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!