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 stellen Sie versehentlich gelöschte Tabellendaten in MySQL wieder her (unbedingt lesen)

Wenn ein Backup vorhanden ist, ist es ganz einfac...

Einige Indikatoren für exzellentes Web-Frontend-Design

Die Barrierefreiheit von Webseiten scheint etwas z...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 sowie zur Kennwortänderung unter Linux

Ich habe diesen Blog geschrieben, um mich daran z...

10 hervorragende Web-UI-Bibliotheken/Frameworks

1. IT Mill-Toolkit IT Mill Toolkit ist ein Open-S...

2 Gründe, warum die HTML-CSS-Tag-Stileinstellung nicht funktioniert

1 CSS-Stil ohne Semikolon ";" 2 Tags sin...

Erste Schritte mit benutzerdefinierten Anweisungen in Vue 3.0

Inhaltsverzeichnis 1. Benutzerdefinierte Anweisun...

Detaillierte Erläuterung der Verbindungslimitkonfiguration von Nginx für IP-Adressen in einem Netzwerksegment

Das sogenannte Verbindungslimit in Nginx ist tats...

Probleme mit Join-Abfragen und Unterabfragen in MySQL

Inhaltsverzeichnis Grundlegende Syntax für Multi-...

Beispielcode für die Verwendung von CSS zum Abdunkeln der Schriftfarbe des ausgewählten Bereichs beim Scrollen

Wenn Sie den Datumswähler kapseln, müssen Sie die...

Zusammenfassung der Lösungen für MySQL, das „Gruppieren nach“ nicht unterstützt

Ich habe die neueste Version von MySQL 5.7.x heru...

Beispielcode zur Implementierung eines Hintergrundunschärfeeffekts mit CSS

Ist es der unten gezeigte Effekt? Wenn ja, lesen ...

Einrichten eines Docker-Proxys unter CentOS 7 (Konfiguration der Umgebungsvariablen des Systemd-Dienstes unter Linux)

Der Docker-Daemon verwendet HTTP_PROXY , HTTPS_PR...

Detaillierte Erklärung häufig verwendeter Stile in CSS3 [Grundlegende Text- und Schriftstile]

Zusammenfassung: Damit Ihre Webseite schöner auss...

Zabbix3.4-Methode zum Überwachen des MongoDB-Datenbankstatus

Mongodb verfügt über einen Befehl db.serverStatus...

Implementierung zum Zeichnen einer Audio-Wellenform mit wavesurfer.js

1. Sehen Sie sich die Renderings an Weiterleiten ...