Detaillierte Beschreibung des verzögerten Ladens und Vorladens von Bildern

In diesem Artikel geht es um Lazy Loading und Preloading von Bildern Wenn Sie sich mit dem Lazy Loading und Preloading von Bildern nicht auskennen oder daran interessiert sind, das Lazy Loading und Preloading von Bildern näher zu erläutern, schauen wir uns das an diesen Artikel. Okay, lasst uns den Unsinn beenden und zur Sache kommen!

1. Lazy Loading

Wenn Sie etwas Neues verstehen, beginnen Sie mit dem Was und Warum. Das heißt, wenn Sie die Lazy-Loading-Technologie von Bildern verstehen möchten, müssen Sie zunächst verstehen, was Lazy-Loading ist. Warum müssen Sie Lazy Loading verwenden?

1.1 Was ist Lazy Loading?

Lazy Loading wird auch verzögertes Laden genannt. Wenn Sie auf eine Seite zugreifen, müssen Sie zunächst das Hintergrundbild des img-Elements oder anderer Elemente durch ein Standardbild (Platzierungsbild) ersetzen, wie folgt:

Der Browser rendert die Seite nur für Sie Sie müssen es einmal anfordern. Wenn das Bild im sichtbaren Bereich des Browsers erscheint, wird der tatsächliche Pfad des Bildes festgelegt und das Bild angezeigt.

1.2 Warum Lazy Loading von Bildern verwenden?

Wenn die Anzahl der Bilder auf der Seite eine bestimmte Anzahl erreicht und die Größe der Bilder relativ groß ist, z. B. verschiedene Websites von Einkaufszentren, Websites mit Bildmaterial usw. Wenn

alle Bilder lädt, sobald die Seite geladen wird, wirkt sich dies offensichtlich auf die Ladegeschwindigkeit der Website aus und erhöht die Belastung des Servers, und die Benutzererfahrung wird zwangsläufig beeinträchtigt schlecht. Dann können Sie zu diesem Zeitpunkt Faulheit nutzen.

1.3 Spezifisches Implementierungsprinzip des verzögerten Ladens

Der Grund, warum das img-Element auf der Seite eine HTTP-Anfrage sendet, ist das src-Attribut eingestellt, andernfalls sendet der Browser keine Anfrage zum Herunterladen des Bildes. Verwenden Sie zunächst ein Platzhalterbild, um alle

-Bilder auf der Seite zu platzieren, und legen Sie das benutzerdefinierte src-Attribut unter dem Element fest, um bei Bedarf den tatsächlichen Pfad des Bildes zu speichern Fügen Sie zum tatsächlichen Pfad

dynamisch zu src hinzu.

2. Vorladen

2.1.

Vorladen bedeutet, Bilder im Voraus zu laden, und sie können direkt aus dem lokalen Cache gerendert werden, wenn der Benutzer sie anzeigen muss.

2.2 Warum Vorspannung verwenden?

Wenn das Bild auf der Seite relativ groß ist, ist der Bereich beim Laden der Seite leer oder das Bild wird langsam geladen, um das Benutzererlebnis zu verbessern,

Diese Bilder sollten vorab in den Cache geladen werden. Wenn der Benutzer die Seite öffnet, werden diese Bilder schnell angezeigt, um ein besseres Benutzererlebnis zu erzielen.

Was sind die Implementierungsmethoden von 2.3?

Methode 1: Verwenden Sie CSS und JavaScript, um das Vorladen zu implementieren

Methode 2: Nur JavaScript verwendenVorladen implementieren

Methode 3: Verwenden Sie Ajax, um Vorladen zu implementieren

3. Der Unterschied zwischen verzögertem Laden und Vorladen und Spezifisch Implementierungsmethoden

Das Verhalten der beiden Technologien ist gegensätzlich, eine lädt im Voraus und die andere ist verzögertes Laden oder kein Laden. Lazy Loading ist gut für den Server und kann ihn etwas entlasten

. Durch das Vorladen erhöht sich hingegen die Belastung des Servers.

Die spezifische Implementierungsmethode des verzögerten Ladens:

1 reines verzögertes Laden, verwenden Sie setTimeOut oder setInterval für verzögertes Laden

2. Das zweite ist bedingtes Laden, das bestimmte Ereignisseauslöst Der asynchrone Download hat gerade begonnen.

3. Der dritte Typ ist das Laden des visuellen Bereichs, dh das Laden nur des Bereichs, den der Benutzer sehen kann. Dies wird im Allgemeinen erreicht Wird geladen, wenn der Benutzer einen bestimmten Bereich sieht. Beginnen Sie mit dem Laden

in einem bestimmten Abstand vor dem Bild, um sicherzustellen, dass der Benutzer das Bild genau sehen kann, wenn er es zieht runter.

Die spezifische Implementierungsmethode des Vorladens:

Es gibt viele Möglichkeiten, das Vorladen zu implementieren, wie zum Beispiel: Verwenden Sie CSS und JavaScript, um das Vorladen zu implementieren; verwenden Sie Ajax, um das Vorladen zu implementieren.

Die häufig verwendete Methode ist new Image(); legt seinen src fest, um das Vorladen zu implementieren, und ruft dann mit der Methode onload das Abschlussereignis des Vorladens zurück. Solange der Browser das Bild lokal herunterlädt, wird derselbe Quellcode zwischengespeichert. Dies ist die einfachste und praktischste Vorlademethode. Wenn Image den Bildkopf herunterlädt, erhält es die Breite und Höhe, sodass die Größe des Bildes vor dem Vorladen ermittelt werden kann (die Methode

besteht darin, einen Timer zu verwenden, um durch das Bild zu blättern Breiten- und Höhenänderungen.

Das Obige ist der gesamte Inhalt dieses Artikels, den Sie leicht selbst meistern können >

Verwandte Empfehlungen:

Jquerys Lazy LoadingPrinzip und Implementierung

JS Vorladen

Video

Audio/Video-Screenshot-Sharing-Techniken

Das obige ist der detaillierte Inhalt vonDetaillierte Beschreibung des verzögerten Ladens und Vorladens von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!