Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, Eddie Osmani von Google, sagt, dass bereits in
Chrome 75 die Unterstützung für das neue Attribut der
<img> und
<iframe> möglicherweise erscheint. Dies bedeutet, dass diese Elemente Standardfunktionen für das sogenannte "verzögerte Laden" von Daten unterstützen.
Wenn Sie herausfinden möchten, wie die Verwendung des neuen Attributs im Code aussieht, sehen Sie sich dieses Beispiel an:
<img align="center" src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe>
Jetzt werden wir darüber sprechen, wie das
loading funktioniert.
Vorläufige Informationen
Webseiten enthalten häufig viele Bilder, was sich auf die Größe der Seiten auswirkt, zu einer
übermäßigen Zunahme führt und die Geschwindigkeit beim Laden von Seiten beeinflusst. Viele der auf den Seiten angezeigten Bilder befinden sich außerhalb ihres sichtbaren Bereichs. Um solche Bilder zu sehen, muss der Benutzer die Seite scrollen.
In der
Vergangenheit mussten Programmierer JavaScript-Bibliotheken (wie
LazySizes ) verwenden, um die Auswirkungen von Bildern außerhalb des sichtbaren Bereichs der Seiten auf die Ladezeit zu begrenzen. Mit diesen Bibliotheken können Sie das Laden solcher Bilder verzögern, bis der Benutzer beim Scrollen durch die Seite nicht mehr nahe genug an sie heranrückt.
Seitenladen 211 Bilder. Eine Seitenversion, die nicht zum verzögerten Laden von Bildern verwendet wird, lädt sofort 10 MB Grafikdaten. Auf derselben Seite, die beim verzögerten Laden (mit LazySizes) verwendet wird, werden nur 250 KB Grafikinformationen vorgeladen. Alles andere wird geladen, wenn sich der Benutzer auf der Seite bewegt. Details zu diesem Experiment finden Sie unter webpagetest.org .Was wäre, wenn der Browser dem Programmierer helfen könnte, das Laden von Bildern zu vermeiden, die sich außerhalb des sichtbaren Bereichs der Seiten befinden? Dies würde sich günstig auf die Geschwindigkeit des Ladens von Daten im sichtbaren Bereich der Seite auswirken, würde bei Geräten mit geringem Stromverbrauch die Gesamtmenge der über das Netzwerk übertragenen Daten verringern und den Speicherverbrauch verringern. All dies wird dank des neuen Attributs der
<img> und
<iframe> bald möglich sein.
Attribut wird geladen
Mit dem
loading kann der Browser das Laden des Inhalts der Elemente
<img> und
<iframe> , die sich außerhalb des sichtbaren Bereichs der Seite befinden, verzögern, bis der Benutzer die Seite nahe genug an diese Elemente gescrollt hat. Dieses Attribut unterstützt drei Werte:
lazy : verweist auf Materialien, die sich gut für faules Laden eignen.eager : Materialien in Elementen mit diesem Attributwert müssen sofort geladen werden.auto : Der Browser entscheidet, ob Materialien mit diesem Attributwert verzögert geladen werden sollen.
Wenn Sie den Wert des
loading nicht angeben, entspricht dies der Einstellung auf
auto .
Derzeit liegt das Ladeattribut für die Elemente <img> und <iframe> unter dem HTML-StandardBeispiele
Das
srcset funktioniert mit
<img> -Elementen (einschließlich des
srcset Attributs und innerhalb des
<picture> -Elements) sowie mit
<iframe> -Elementen.
<img align="center" src="unicorn.jpg" loading="lazy" alt=".."/> <img align="center" src="unicorn.jpg" loading="eager" alt=".."/> <img align="center" src="unicorn.jpg" loading="auto" alt=".."/> <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img align="center" src="fallback.jpg" loading="lazy"> </picture> <img align="center" src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A rad wolf" loading="lazy"> <iframe src="video-player.html" loading="lazy"></iframe>
Es ist zu beachten, dass wir hier Formulierungen wie die folgenden verwenden: „Wenn der Benutzer die Seite so scrollt, dass sich ihr sichtbarer Bereich in der Nähe des Elements befindet“. Der Browser ermittelt den genauen Zeitpunkt, zu dem das Bild geladen wird. Im Allgemeinen können wir hoffen, dass der Browser mit dem Herunterladen von Materialien beginnt, deren Download sich verzögert hat, einige Zeit bevor der Bereich der Seite, der sie enthält, für den Benutzer sichtbar ist. Dies erhöht die Wahrscheinlichkeit, dass das Herunterladen und Ausgeben relevanter Materialien abgeschlossen ist, sobald der Benutzer sie sieht.
Bitte beachten Sie, dass ich
vorgeschlagen habe , das betreffende Attribut als
loading , da dieser Ansatz zur Benennung dem entspricht, der bei der Auswahl eines Namens für das
Dekodierungsattribut verwendet wird. Frühere Sätze wie
lazyload funktionierten nicht, da dieses Attribut mehrere Werte unterstützen musste (
lazy ,
eager und
auto ).
Überprüfen Sie die Browserunterstützung für das Laden von Attributen
Wir haben die Bedeutung der Möglichkeit berücksichtigt, JavaScript-Bibliotheken zum Organisieren des verzögerten Ladens von Materialien zu verwenden (für die browserübergreifende Unterstützung dieser Funktion). Sie können überprüfen, ob der Browser das Ladeattribut unterstützt, indem Sie:
<script> if ('loading' in HTMLImageElement.prototype) {
Beachten Sie, dass das
loading verwendet werden kann, um die Funktionen der Seite schrittweise zu erweitern. Browser, die dieses Attribut unterstützen, können das verzögerte Laden von Materialien mit
loading=lazy , und Browser, die diese Funktion nicht unterstützen, laden diese Materialien einfach wie zuvor herunter.
Browserübergreifendes verzögertes Laden von Bildern
Wenn die browserübergreifende Unterstützung für das verzögerte Laden von Bildern wichtig ist, reicht es nicht aus, nur festzustellen, ob der Browser diese Funktion unterstützt. Wenn dies nicht der Fall ist, verwenden Sie die entsprechende Bibliothek, wenn Sie ein Design wie
<img align="center" src=unicorn.jpg loading=lazy /> , um das Bild im Markup zu beschreiben
<img align="center" src=unicorn.jpg loading=lazy /> .
Im Markup müssen Sie
<img data-src=unicorn.jpg /> (anstelle von
src ,
srcset oder
<source> ) verwenden, um das normale Laden des Bildes durch Browser zu vermeiden, die das neue Attribut nicht unterstützen. Um solche Attribute in solche zu ändern, die mit Unterstützung des
loading des Browsers verwendet werden müssen, oder um die entsprechende Bibliothek herunterzuladen, wenn dieses Attribut nicht unterstützt wird, können Sie JavaScript verwenden.
Hier ist ein Beispiel, wie dies aussehen könnte:
<img align="center" src="hero.jpg" alt=".."/> <img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/> <img data-src="cats.jpg" loading="lazy" alt=".." class="lazyload"/> <img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/> <script> (async () => { if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll("img.lazyload"); images.forEach(img => { img.src = img.dataset.src; }); } else { </script>
Betrachten Sie einige der Funktionen dieses Codes:
- Bilder, die für den Benutzer unmittelbar nach dem
<img> der Seite sichtbar sind, werden mit regulären <img> -Tags beschrieben. Wenn Sie das Attribut data-src ohne src werden Bilder nicht sofort nach dem Laden der Seite angezeigt. Wenn Sie also die Bilder src , die unmittelbar nach dem Laden der Seite sichtbar sein sollen, müssen Sie das Attribut src angeben. - Bei der Beschreibung von Bildern, die nach dem Laden der Seite für den Benutzer nicht sofort sichtbar sind, verwenden wir das Attribut
data-src . Dies geschieht, um zu verhindern, dass sie in Browsern, die das Ladeattribut nicht unterstützen, normal geladen werden. Wenn der Browser dieses Attribut unterstützt, ändern wir data-src in src . - Wenn das Ladeattribut nicht unterstützt wird, laden wir die Hilfsbibliothek (lazySizes) und initialisieren sie. Hier verwenden wir
class=lazyload , um die LazySizes-Bibliothek auf die Bilder zu verweisen, mit denen wir mithilfe der Lazy-Loading-Technik arbeiten möchten.
Demo
Hier können Sie sich ein Beispiel einer Seite ansehen, auf der 100 Bilder von Katzen verzögert geladen werden. Aber bei Interesse die Video-Downloads dieser Seite.
Implementierungsfunktionen zum Laden der Attributunterstützung in Chrome
Wir empfehlen dringend, vor der Verwendung des
loading in der Produktion zu warten, bis die Unterstützung in der stabilen Version von Chrome angezeigt wird. Wenn Sie diese Gelegenheit nutzen möchten, interessiert Sie vielleicht, worüber wir sprechen werden.
Attributtest wird geladen
Um das neue Attribut jetzt zu erhalten, rufen Sie die Seite mit den Einstellungen für Chrome-Flags (
chrome://flags ) auf, aktivieren Sie die
chrome://flags Enable lazy frame loading aktivieren und zum
Enable lazy frame loading Enable lazy image loading aktivieren und starten Sie den Browser neu.
Browsereinstellungen
Die Implementierung der Methode zum verzögerten Laden von Materialien in Chrome basiert nicht nur darauf, wie nahe der sichtbare Bereich der Seite an diesen Materialien liegt, sondern auch auf der Verbindungsgeschwindigkeit. Schwellenwerte zum Auslösen eines verzögerten Ladens von Materialien für unterschiedliche Verbindungsgeschwindigkeiten sind im Code fest codiert. Diese Werte können jedoch über die Befehlszeile überschrieben werden. Hier ist ein Beispiel für das Überschreiben von Einstellungen für Bilder:
canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=5000,lazyImageLoadingDistanceThresholdPxOffline=8000,lazyImageLoadingDistanceThresholdPxSlow2G=8000,lazyImageLoadingDistanceThresholdPx2G=6000,lazyImageLoadingDistanceThresholdPx3G=4000,lazyImageLoadingDistanceThresholdPx4G=3000 'https://mathiasbynens.be/demo/img-loading-lazy'
Der obige Befehl entspricht den aktuellen Standardeinstellungen. Damit das Laden von Bildern beginnt, wenn die Bildlaufposition der Seite 400 Pixel vom Bild entfernt ist, müssen alle Werte in diesem Befehl in 400 geändert werden. Das Folgende ist ein Beispiel für eine 1-Pixel-Variation dieses Befehls (diese Einstellung wird im obigen Video verwendet )
canary --user-data-dir="$(mktemp -d)" --enable-features=LazyImageLoading --blink-settings=lazyImageLoadingDistanceThresholdPxUnknown=1,lazyImageLoadingDistanceThresholdPxOffline=1,lazyImageLoadingDistanceThresholdPxSlow2G=1,lazyImageLoadingDistanceThresholdPx2G=1,lazyImageLoadingDistanceThresholdPx3G=1,lazyImageLoadingDistanceThresholdPx4G=1 'https://mathiasbynens.be/demo/img-loading-lazy'
Es ist sehr wahrscheinlich, dass sich die Standardkonfiguration für das verzögerte Laden in Chrome ändert, da sich die Implementierung dieser Funktion in den kommenden Wochen stabilisiert.
Entwicklertools
Merkmale der Implementierung der Unterstützung für das
loading in Chrome sind, dass der Browser beim Laden der Seite die ersten 2 KB Bilder vom Server anfordert, wenn er die Bereichsanforderungstechnologie unterstützt. Die ersten 2-KB-Bilder enthalten wahrscheinlich Informationen zu ihrer Größe. Auf diese Weise kann der Browser Platzhalter mit Größen generieren, die den Größen der Bilder entsprechen. Wenn wir in diesen 2K über kleine Bilder wie Symbole sprechen, ist es außerdem sehr wahrscheinlich, dass das gesamte Bild enthalten ist.
Laden von Fragmenten von GrafikdateienChrome lädt die verbleibenden Bilddaten herunter, sobald der Benutzer kurz davor ist, sie zu sehen. Wenn Sie mit Entwicklertools arbeiten, kann dies dazu führen, dass Informationen zu zwei Bilddownloads im Netzwerkfenster angezeigt werden und Informationen zu zwei Anforderungen, die zum Herunterladen jedes Bilds ausgeführt werden, im Ressourcenzeitfenster angezeigt werden.
Browser-Support-Server, der das Ladeattribut definiert
Wenn wir in einer perfekten Welt leben, können Sie sich nicht auf die Browseranalyse mit clientseitigem JavaScript verlassen, um herauszufinden, ob Sie die Hilfsbibliothek für die korrekte Seitenausgabe in einem Browser verwenden müssen. Bei diesem Ansatz würde der Server, der im Voraus weiß, ob eine solche Bibliothek benötigt wird oder nicht, diese in die an den Browser gesendete Seite aufnehmen (oder nicht einschließen). Eine solche Überprüfung kann mithilfe der
HTTP-Client-Hinweis- Technologie ermöglicht werden, mit der der Client „Hinweise“ zu seinen Funktionen an den Server senden kann.
Der entsprechende „Hinweis“ zur Unterstützung des
loading befindet sich derzeit in einem frühen Stadium.
Zusammenfassung
Der Autor dieses Materials lädt alle ein, die daran interessiert sind, das
loading bei der Arbeit mit den Elementen
<img> und
<iframe> verwenden, um es auszuprobieren und
ihre Eindrücke damit zu teilen. Er ist besonders daran interessiert zu erfahren, wie aus Sicht der Entwickler die hier vorgeschlagenen browserübergreifenden Unterstützungsmechanismen für das verzögerte Laden von Daten aussehen und ob er einige Grenzfälle übersehen hat, wenn er über solche Mechanismen spricht.
Liebe Leser! Planen Sie, das
loading in Ihren Projekten zu verwenden?
