Detaillierte Erklärung zum Lay-Loading von JavaScript

Detaillierte Erklärung zum Lay-Loading von JavaScript

Lazy Loading

Wie der Name schon sagt, bin ich faul und möchte nicht den gesamten Inhalt laden. Wenn der Benutzer später sehen möchte, was ich lade,

Zusammenfassung: Lazy Loading ist eigentlich verzögertes Laden, d. h. das Laden des Objekts, wenn es benötigt wird.

Umsetzungsprinzip:

Zuerst müssen Sie viele erste Bilder zum Laden haben und nach dem Laden die später benötigten Bilder anzeigen

Schritte zum Erreichen:

1. Laden Sie das Bild
2. Bestimmen Sie, welche Bilder geladen werden sollen
3. Unsichtbares Laden von Bildern
4. Ersetzen Sie das reale Bild

CSS-Stile:

    <Stil>
        img {
            Breite: 400px;
            Höhe: 300px;
            Anzeige: Block;
        }
        .Reihe{
            Breite: 300px;
            Höhe: 400px;
        }
    </Stil>

HTML-Teil:

  <img class="rwo" src="image/load.gif" alt="" data-original="image/Bild(1).jpeg">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/Bild(3).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/Bild(9).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/Bild(10).jpg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/Bild(13).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/Bild(92).jpeg"">
        <img src="image/load.gif" alt="" data-original="image/Bild(1).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(2).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(19).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(23).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(33).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(37).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(38).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(39).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(40).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(41).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(42).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(43).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(44).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(45).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(46).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(47).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(48).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(49).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(50).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(51).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(52).jpg">
        <img src="image/load.gif"alt="" data-original=" image/Bild(53).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(54).jpg">

Warum gibt es zwei Pfade? Da in einem Bild ein echtes Bild und ein gefälschtes Bild vorhanden sind, müssen wir zuerst das gefälschte Bild laden und es dann durch das echte Bild ersetzen. In der folgenden Abbildung befindet sich das gefälschte Bild links und das echte Bild rechts

Skriptteil:

    <Skript>
        let view = document.documentElement.clientHeight; //Höhe des sichtbaren Bereichs des Browserfensters abrufen function fn1(){
            setTimeout(function lazyload() { //Einen Timer hinzufügen, um die Ausführung nach einer Sekunde zu starten let imgs = document.querySelectorAll('img'); // Alle img-Tags abrufen // console.log(imgs);
            for (let item of imgs) { // Mit for-of über alle Bilder iterieren // Position des Bildes im Browser anzeigen let rect = item.getBoundingClientRect(); // Position jedes Bildes im sichtbaren Bereich suchen console.log(rect);
                if (rect.bottom >= 0 && rect.top < view) { // Gib eine if-Anweisung aus, wenn die Unterseite des Bildes größer als 0 und kleiner als der sichtbare Bereich des Browsers ist. Gehe wie folgt vor: item.src = item.getAttribute('data-original') // Hole den Pfad von data-original und übergebe ihn an img
                }
            }
        },1000)
        }
        fn1();
        document.addEventListener('scroll',fn1) //Wenn ein Scroll-Ereignis auftritt, wird die Aufgabe in der Funktion fn1 ausgeführt</script>

Warum for-of statt for-in oder for-Schleife verwenden? Weitere Einzelheiten finden Sie unter for-of in ES6

Die Wirkung ist wie folgt:

Vollständiger Code:

<!DOCTYPE html>
<html lang="de">
 
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <Titel>Lazy Loading</Titel>
    <Stil>
        img {
            Breite: 400px;
            Höhe: 300px;
            Anzeige: Block;
        }
        .Reihe{
            Breite: 300px;
            Höhe: 400px;
        }
    </Stil>
</Kopf>
<Text>
        <img class="rwo" src="image/load.gif" alt="" data-original="image/Bild(1).jpeg">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/Bild(3).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/Bild(9).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/Bild(10).jpg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/Bild(13).jpeg"">
        <img class="rwo" src="image/load.gif" alt="" data-original="image/Bild(92).jpeg"">
        <img src="image/load.gif" alt="" data-original="image/Bild(1).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(2).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(19).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(23).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(33).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(37).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(38).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(39).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(40).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(41).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(42).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(43).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(44).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(45).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(46).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(47).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(48).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(49).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(50).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(51).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(52).jpg">
        <img src="image/load.gif"alt="" data-original=" image/Bild(53).jpg">
        <img src="image/load.gif" alt="" data-original="image/Bild(54).jpg">
    <Skript>
        let view = document.documentElement.clientHeight;
        Funktion fn1(){
            setzeTimeout(Funktion lazyload() {
            : Lassen Sie imgs = document.querySelectorAll('img');
            // konsole.log(imgs);
            für (let item of imgs) {
                // Die Position des Bildes im Browser anzeigen let rect = item.getBoundingClientRect();
                Konsole.log(Rechteck);
                wenn (rechteck.unten >= 0 && rechteck.oben < Ansicht) {
                    item.src = item.getAttribute('Daten-Original')
                }
            }
        },1000)
        }
        fn1();
        document.addEventListener('scrollen',fn1)
    </Skript>
</body>
 
</html>

Die geladenen Bilder sind unten angehängt. Natürlich können Sie sie auch selbst finden (ich finde es mühsam, sie selbst zu finden —.—). Wenn Sie zu faul sind, andere Bilder selbst zu finden, können Sie mir eine private Nachricht senden und ich werde sie sortieren und Ihnen senden ღ( ´･ᴗ･` )

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Das könnte Sie auch interessieren:
  • Natives JS zum verzögerten Laden von Bildern und zur Optimierung der Seitenleistung
  • Analyse und Optimierung von Beispielen für das verzögerte Laden von Bildern in JavaScript-Wasserfall
  • JS implementiert Lazy Loading von Seitendaten
  • Detaillierte Erläuterung der Optimierungsmethoden für das Lazy Loading von JavaScript-Bildern

<<:  Web 2.0: Ursachen und Lösungen der Informationsüberflutung

>>:  Eine kurze Diskussion über das Blockieren von CSS-Zusammenführungen und andere Auswirkungen

Artikel empfehlen

So verwenden Sie einen SSH-Tunnel, um eine Verbindung zum MySQL-Server herzustellen

Vorwort In einigen Fällen kennen wir nur die Intr...

Detaillierte Erklärung zur Verwendung struktureller Pseudoklassenselektoren und Pseudoelementselektoren in CSS3

Einführung in strukturelle Pseudoklassenselektore...

So verwenden Sie JS zum Parsen des Excel-Inhalts in der Zwischenablage

Inhaltsverzeichnis Vorwort 1. Ereignisse und Zwis...

MySQL-Datumsfunktionen und Datumskonvertierungs- und -formatierungsfunktionen

MySQL ist eine kostenlose relationale Datenbank m...

Das Problem, dass beim Verbinden mit der MySQL-Datenbank in Idea chinesische Zeichen verstümmelt erscheinen

Problem: Bei Verwendung von JDBC zur Verbindung m...

Die detaillierteste Installation und Konfiguration von Redis in Docker (mit Bildern und Text)

1. Finden Sie eine geeignete Version von Redis fü...

So entfernen Sie den gepunkteten Rahmen beim Klicken auf einen Link in FireFox

Ich bin heute auf mehrere Browserkompatibilitätsp...

CSS simuliert Float, um den Effekt eines zentrierten Textes zu erzielen, der das Bild links und rechts umgibt

Was ist Textumbruch um Bilder? Dies ist die Auswi...

MySql-Wissenspunkte: Transaktion, Index, Sperrprinzip und Nutzungsanalyse

Dieser Artikel erläutert anhand von Beispielen di...

So erstellen Sie geplante Aufgaben mit dem Crond-Tool in Linux

Vorwort Crond ist ein Tool zur geplanten Ausführu...

So zeigen Sie im img-Tag in HTML nur die Bildmitte an (drei Methoden)

Derzeit gibt es drei Möglichkeiten, die Mitte ein...

So installieren Sie MySQL 5.7 unter Windows

Laden Sie zuerst die komprimierte Version von MyS...

Lösung für den Docker-Container, der nicht gestoppt und gelöscht werden kann

Suchen Sie die ID des laufenden Containers Docker...

Beispielcode zur Umsetzung des „Pluszeichen“-Effektes mit CSS

So erzielen Sie den unten gezeigten Pluszeichen-E...

Detailliertes Tutorial zur JDK-Installation und Umgebungsvariablenkonfiguration unter Win10

Inhaltsverzeichnis Vorwort 1. Vorbereitung 2. Ins...