IntersectionObserver hat das Lazy Loading viel einfacher und effizienter gemacht als früher, aber um es wirklich richtig zu machen, muss man immer noch den src und so weiter entfernen, was umständlich ist. Es ist definitiv nicht so einfach wie
<img src="celebration.jpg" loading="lazy" alt="..." />
Addy Osmani sagt, es kommt in Chrome 75
Das
loading-Attribut ermöglicht es einem Browser, Bilder und iframes, die sich außerhalb des sichtbaren Bereichs befinden, erst dann zu laden, wenn der Nutzer zu ihnen scrollt.loadingunterstützt drei Werte
lazy: ist ein guter Kandidat für Lazy Loading.eager: ist kein guter Kandidat für Lazy Loading. Sofort laden.auto: der Browser entscheidet, ob er lazy laden soll oder nicht.
Ich werde wahrscheinlich einen WordPress-Content-Filter für diese Website schreiben, der dieses Attribut für jedes verdammte Bild auf dieser Website hinzufügt. Halleluja, sage ich, und mögen andere Browser schnell folgen.
Einfaches Lazy Loading von Bildern wird die größte Auswirkung auf die Website als Ganzes haben, aber lazy geladene Iframes werden für die einzelnen Websites, die sie verwenden, noch größer sein. Ich bin dabei.
Ja, ja, was auch immer, natives Lazy Loading von Bildern, aber Lazy Loading von Iframes wird ein verdammter Game Changer für Ad Tech sein: https://#/ADGc1UsVBf
— Laurie Voss (@seldo) 8. April 2019
Ich hoffe, das wird den Bedarf an nativen Seitenverhältnissen ebenfalls vorantreiben, da ein Hauptgrund dafür die Verhinderung von Content-Reflows durch später ladende Elemente ist. Wir haben inzwischen zwar Möglichkeiten.
Wenn Sie Ihrer Website jetzt Medien mit Lazy Loading hinzufügen möchten, wären Sie schlau, diese nativen Lazy Loading-Attribute einzuschließen, aber zum Zeitpunkt dieses Updates (Juli 2019) ist die Unterstützung in stabilen Browsern noch nicht existent. Sie werden mehr tun wollen
Diese Browser-Supportdaten stammen von Caniuse, das mehr Details enthält. Eine Zahl bedeutet, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 77 | 121 | Nein | 79 | 16.4 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 16.4 |
Ich frage mich, ob das Hinzufügen von loading=”lazy” durch JavaScript effektiv wäre oder ob es zu spät im Ladevorgang wäre? Eine Erweiterung oder sogar ein Tampermonkey-Skript, um allen Bildern und Iframes Lazy Loading zuzuweisen, könnte nett sein.
Etwas anderes, das mir in dieser Beschreibung auffällt. „Ein Implementierungsdetail des Ladens in Chrome ist, dass es die ersten 2 KB an Bildern beim Seitenaufruf lädt. Den Rest der Bild-Bytes lädt es, wenn der Nutzer sie zu sehen bekommt.“ Das deutet für mich darauf hin, dass der Browser Content-Reflow verhindert, indem er die Größen der Bilder ermittelt, ohne die gesamten Bilder zu laden.
Das Setzen von loading=”lazy” per JavaScript kann nicht funktionieren, da Browser Bilder sofort laden, sobald sie den DOM-Knoten parsen. Der andere Weg, das Ändern von loading=”lazy” zu loading=”eager” per JavaScript funktioniert wie erwartet. Und ja, die „Pre-Flight“-Range-Requests, die die ersten 2 KB abrufen, werden verwendet, um die Bildabmessungen zu ermitteln.
Es gibt bereits einen Vorschlag für eine Feature Policy, um alle Bilder standardmäßig auf loading=”lazy” zu setzen, ohne jedes img-Tag ändern zu müssen.
Ich habe einen umfassenden Artikel darüber geschrieben, der Code-Schnipsel und Antwortzeit-Tabellen für alle Anfragen enthält. Sie finden ihn hier: https://tiny.pictures/guide/native-lazy-loading
Was ist mit Hintergrundbildern? Ich verwende divs mit CSS-Hintergrundbildern…
Hey. Die Verwendung von Hintergrundbildern als Bilder kann manchmal praktisch sein, je nachdem, was Sie tun müssen. Aber Sie sollten es nicht tun, wenn Ihre Bilder Inhalt sind. Denn normale Bilder sind druckbar, zugänglich, gut für SEO usw. Lesen Sie mehr über Lazy Loading von responsiven Bildern hier: https://www.andreaverlicchi.eu/lazy-load-responsive-images-in-2019-srcset-sizes-more/. Übrigens, das vanilla-lazyload-Skript ermöglicht es Ihnen auch, Hintergrundbilder mit Lazy Loading zu laden und natives Lazy Loading zu verwenden, wo es unterstützt wird. Probieren Sie es aus!
Wird diese Funktion auch in Chromium-basierten Browsern funktionieren?
Nun, dieser Code ließ sich nicht anzeigen, versuchen wir es so
<img src="was-auch-immer" async>Das sind großartige Neuigkeiten! Ich frage mich jedoch nach Karussells oder Diashows… Wird der Browser schlau genug sein, um zu wissen, dass Bild „x“ immer noch 15 Folien entfernt ist, wenn sich der Benutzer auf Folie 5 befindet… und somit das Bild nicht herunterlädt, bis es sich in der Nähe des sichtbaren Fensters befindet?
Vielleicht ein vierter möglicher Wert für das „loading“-Attribut: „never“ …was „niemals laden“ bedeuten würde und dann könnte man das „loading“-Attribut (per JavaScript) in „eager“ ändern, wenn sich die Folie dem sichtbaren Bereich im Karussell nähert…
So oder so, eine großartige neue Funktion für das native Web.
Ich schätze, es ist zu früh für diesen Tag…
Was wäre, wenn wir mit nur wenigen Zeilen Code sowohl natives Lazy Loading als auch JS-basiertes Lazy Loading mit IntersectionObserver haben könnten? Hier ist, wie:
https://www.andreaverlicchi.eu/native-lazy-loading-with-vanilla-lazyload/
Ich kann kaum glauben, wie effektiv diese Funktion sein wird, wenn sie beim Seitenaufruf die ersten 2 KB aller Bilder laden muss, nur um festzustellen, welche Bilder sich im sichtbaren Bereich befinden. Nehmen wir an, ich habe 20 Bilder übereinander gestapelt… Der Browser muss 20 Bildanfragen stellen, um festzustellen, welche Bilder sich im sichtbaren Bereich befinden, und erst dann beginnt er, die vollständigen Bilder zu laden, die sich im sichtbaren Bereich befinden. Das sind 22 Serveranfragen, selbst wenn nur 2 Bilder im sichtbaren Bereich sind, was die Antwort verlangsamen könnte. Und das bedeutet 40 Serveranfragen für 20 Bilder auf einer Seite insgesamt, was im Wesentlichen die Anzahl der Anfragen verdoppelt.
Man könnte korrekte intrinsische Platzhalter für die Bilder im Layout einfügen, aber was wäre dann der Sinn davon, dass der Browser 2 KB Daten von jedem Bild vorab abruft? Verschwendung von Anfragen und Bandbreite.
Derzeit scheint der moderne JS IntersectionObserver effektiver zu sein und verursacht viel weniger Anfragen, nur für Bilder im sichtbaren Bereich.
Habe ich etwas übersehen?
Hey Leute, ich finde die Antwort im Web nicht.
Vielleicht bin ich dumm, aber da Chrome v75 jetzt draußen ist, wird natives Lazy Loading endlich unterstützt?