lazy-images und Isotope

Hallo Gemeinde,
ich bin auf der Suche nach einer Lösung, wie ich Produktbilder aus Isotope nachladen kann.
Wir haben für einen Kunden einen größeren Shop erstellt und die möchten unbedingt ALLE Produkte auf der Startseite anzeigen lassen. Ladezeit = 4-5 Sekunden. Ich sage da mal nichts weiter so, Kunde ist König.
Ich habe schon öfter lazy-images für andere Projekte genutzt, aber nicht für Isotope.

Für normale Bilder funktioniert es im Shop, nicht aber für Isotope-Produktbilder.
Ich habe das iso_gallery_inline.html5 mal angepasst:

PHP-Code:

---

<figure class="image_container"><img id="g<?php echo $this->name; ?>" class=" lazyloaded" src="<?php echo $this->src; ?>" data-src="<?php echo $this->src; ?>" itemprop="image" alt="<?php echo $this->alt; ?>"></figure>

---

Hab dort die class und die data-src mit eingebracht. Aber das scheint nicht zu reichen.
Hat jemand eine Idee?

Wenn du

Code:

---

src="<?php echo $this->src; ?>"

---

setzt, wird das Bild ja schon geladen? Das müsstest du einfach weglassen und nur

Code:

---

data-src

---

setzen bzw. in

Code:

---

src

---

halt ein low-quality Bild angeben oder einen Platzhalter oder sowas wie

Code:

---

src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="

---

.

Klingt für mich absolut logisch, funktioniert aber trotzdem nicht.
Die Platzhalter bleiben "leer".
Muss ich dafür noch irgendwas aktivieren?

Das initiierende Script vielleicht?

Hallo,

mit dem Script oben kann lazysizes nicht funktionieren.
Alleine schon weil die Attribute data-srcset und sizes fehlen.
Das Attribut src sollte nicht das Bild sondern den placeholder enthalten wie zB das transparente pixel: src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAE AAAICTAEAOw=="
Oder komplett fehlen, was aber dann invalides HTML wäre.


Und weil die Klasse falsch ist.
class="lazyload" wäre richtig.

Schau dir hierzu am besten mal die Doku an von LazySizes:
https://github.com/aFarkas/lazysizes


Zusätzlich zum JS LazySizes generiert das Contao Plugin "contao-lazy-images" thumbnails (transparent oder mit vorschau) in korrektem Seitenverhältnis.
Wenn du selber ein Template baust, bekommst du zwar das Lazyloading per JS LazySizes zum laufen, aber auf die Thumbnails des Contao Plugins musst du dann verzichten.