Detaillierte Erklärung zum Lay-Loading von JavaScript
Lazy LoadingWie 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:
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 ღ( ´･ᴗ･` )
ZusammenfassenDieser 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:
|
<<: 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
Detailliertes Installationstutorial für MySQL 5.7 unter CentOS 6 und 7
Für die Entwicklung benötigen Sie immer Daten. Al...
Implementierung einer kreisförmigen CSS-Aushöhlung (Gutschein-Hintergrundbild)
In diesem Artikel werden hauptsächlich kreisförmi...
Beispiel für den Aufbau eines Redis-Sentinel-Clusters basierend auf Docker
1. Übersicht Redis Cluster ermöglicht hohe Verfüg...
Löschvorgang für Docker-Volumes
prune Um diesen Befehl verwenden zu können, müsse...
my.cnf-Parameterkonfiguration zur Optimierung der InnoDB-Engine-Leistung
Ich habe im Internet unzählige my.cnf-Konfigurati...
So analysieren Sie die Attributschnittstelle zum Hinzufügen eines Dateisystems unter Linux oder Android
Der Erste: 1. Fügen Sie wichtige Headerdateien hi...
Node.js + Express + Socket realisiert einen Online-Chatroom für mehrere Personen in Echtzeit
In diesem Artikel wird der spezifische Code von N...
Verwenden Sie Dockercompose, um eine Springboot-MySQL-Nginx-Anwendung zu erstellen
Im vorherigen Artikel haben wir Docker verwendet,...
Ubuntu 20.04 stellt eine Verbindung zu WLAN her (2 Methoden)
Ich habe vor Kurzem Ubuntu 20.04 installiert und ...
Tipps zum Festlegen von HTML-Tabellenrändern
Für viele HTML-Neulinge ist die Tabelle <table...
jQuery erzielt Ein- und Ausblendeffekte
Bevor wir jQuery verwenden, um den Ein- und Ausbl...
Lösung für die geringe Schreibeffizienz von unter AIX gemountetem NFS
Von NFS bereitgestellte Dienste Mounten: Aktivier...
Detaillierte Erläuterung der mysql5.6 Master-Slave-Einrichtung und asynchroner Probleme
Inhaltsverzeichnis 1. MySQL Master-Slave-Replikat...
Detaillierte Schritte zur Installation von JDK und Tomcat auf einem Linux-Cloud-Server (empfohlen)
Herunterladen und Installieren von JDK Schritt 1:...
Eine neue CSS-Bildersatztechnik (Hintergrundanzeige und Textverschiebung vom Bildschirm), um 9999 Pixeln Lebewohl zu sagen
Die -9999-Pixel-Bildersetzungstechnologie ist seit...