Ng-lazyload-image: Lazyload und srcset

Hi,

Diese Bibliothek unterstützt leider nicht srcset, sollte es aber unterstützen. Es ist eine ziemlich wichtige Funktion.

Abgesehen davon ist es nicht so einfach zu unterstützen, da wir das srcset auf die gleiche Weise analysieren und verstehen müssen, wie es der Browser tut.

Option 1:

Wir behandeln srcset als Sonderfall und versuchen nicht, das Bild im Hintergrund zu laden, sondern setzen stattdessen nur srcset wenn das Bild der Viewport ist:
Nehmen wir an, wir haben das folgende HTML-Tag:
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
Wenn sich das Bild im Ansichtsfenster befindet, sehen wir uns srcset und stellen fest, dass lazyLoad einen srcset -String enthält und transformieren das Tag einfach in:
<img srcset="small.jpg 300w, large.jpg 500w">

Profi:
Einfache Implementierung
Nachteil:
Der Benutzer wird nie "defaultImage" sehen.
Wir können niemals Netzwerkfehler beim Laden des Bildes behandeln.

Option 2:

Wir analysieren srcset und wählen die beste Option (wie wir denken, dass der Browser es hätte tun sollen).
Nehmen wir an, wir haben das folgende HTML-Tag:
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
Wir stellen fest, dass lazyLoad ein srcset und parsen die Zeichenfolge in etwa wie folgt:
[ { url: 'small.jpg', width: 300 }, { url: 'large.jpg', width: 500 } ]
Wir vergleichen es mit der Browserbreite (und dem Pixelverhältnis des Geräts ) und wählen das beste Bild aus. Lädt das Bild im Hintergrund und wenn es geladen wird, setzen wir einfach srcset und da sich das Bild im Cache befindet, wird es sofort geladen.

Profi:
Das Bild wird lazyloaded 🎉
Der Benutzer sieht das Standardbild.
Wir können mit Netzwerkfehlern umgehen (sollten wir versuchen, ein anderes Bild von srcset laden oder sollten wir einfach das Fehlerbild laden?).
Nachteil:
Es ist immer schwierig, einen String so zu parsen, wie es der Browser hätte tun sollen; Wir werden wahrscheinlich einige Edge-Use-Cases vermissen.
Nach meinem Verständnis verwendet der Browser immer das größte Bild, wenn es im Cache gespeichert ist. Da wir nicht wissen können, ob das Bild bereits geladen wurde, müssen wir das am besten angepasste Bild laden (aber das größte Bild wird angezeigt, nachdem wir srcset ). Nehmen wir zB an, wir haben das folgende srcset small.jpg 300w, large.jpg 500w und der Bildschirm ist kleiner als 500 px, aber large.jpg ist bereits geladen. Nach meinem Verständnis hätte der Browser large.jpg markieren sollen, da er sich im Cache befindet, aber da wir nicht wissen, dass wir small.jpg laden und wenn er geladen wird, setzen wir srcset und der Browser wird large.jpg auswählen (ich kann mich jedoch irren). dh wir haben unnötig ein Bild geladen.

Abschluss:

Ich denke, Option 2 ist machbar (sollte nicht zu schwer sein) und ich denke, wir sollten es tun. Meine Zeit ist allerdings gerade recht begrenzt, aber ich nehme gerne eine PR an :)

Hallo @tjoskar , danke für die schnelle Antwort, ich stimme dir zu, dass die zweite Option machbar sein könnte. Ich habe momentan auch nicht allzu viel Zeit, da ich unter einigen Fristen stehe, aber sobald ich mehr Zeit habe, möchte ich zu diesem Feature beitragen, vor allem wenn man bedenkt, dass ich das Verhalten der Bibliothek bereits erweitert habe, um faul zu unterstützen Laden für das Image-Tag mit der Eigenschaft hlink.href :)

Oder ignorieren Sie die srcset-Option des Standardbrowsers und implementieren Sie sie als Ihren eigenen Entscheidungsprozess und passen Sie sie mit der Zeit an, um sie so gut wie möglich zu gestalten :)

Spez

Sie müssen sich nur an die Spezifikation halten und ich glaube, die Spezifikation ist ziemlich einfach.

Aber wie Sie darauf hingewiesen haben, kann die Browserimplementierung das zerstören, was Sie hier erreichen möchten, daher glaube ich, dass sie umgangen werden sollte.

Ich habe eine Pull-Anfrage (#231) gesendet, die die responsive Image-Unterstützung zu beiden hinzufügt \ Ich warte auf jeden Input.

Dies ist in 3.4.0 . Danke @sapierens