Schauen Sie sich ohne weiteres das Beispiel an
Zunächst der Weg zum Schreiben von Bildmarken
<img data-src = "/image/image.jpg">
Sie müssen die Adresse des Bildes in das data-src -Attribut einfügen, und src Wert wird nicht benötigt, sodass Sie src Attribut direkt entfernen können.
CSS -Code
Für alle Bilder mit data-src -Attribut werden wir zunächst den Status als unsichtbar anmelden und ihn durch Transparenz anpassen:
IMG {Opazität: 1; Übergang: Opazität 0,3s;} img [data-src] {Opazität: 0;}Was ist der Zweck des Schreibens auf diese Weise? Wenn das Bild lädt, können Sie den Effekt sehen.
JavaScript -Code
Wir werden schließlich data-src -Attribut entfernen und es durch das SRC-Attribut ersetzen. Dies ist jedoch die Aktion, nachdem das Bild erfolgreich geladen wurde:
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) { img.setAttribute('src', img.getAttribute('data-src')); img.onload = function() { img.removeAttribute('data-src'); };});Im Vergleich zu anderen verschiedenen Bildverzögerungs -Ladetechnologien ist diese Methode sehr einfach. Es erfordert fast keine anderen Bedingungen und kann überall verwendet werden. Es ist sehr flexibel zu verwenden.
Es sollte jedoch beachtet werden, dass Einfachheit das Beste oder Schlechtes hat und es auch aufgrund der Einfachheit nicht ausreicht. Es hat nicht die Funktion, Bilder in das visuelle Fenster zu scrollen und sie dann zu laden. Welche Technologie am Ende verwendet wird, hängt vom Szenario ab.
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für die Arbeit und das Studium aller hilfreich sein.