Über das Lazy Loader-Modul
Mit dem Lazy Loader-Modul von DIXENO können Sie Ihren Shop performanter machen, indem Bilder erst geladen werden, wenn die Bilder im Sichtbereich der Besucher und Besucherinnen erscheinen. Gleichzeitig kann das Modul die Bilder in Originalgröße oder abhängig von der Größe, die der Browser darstellt, laden. Beispielsweise ist ein Bild original 800 x 600 px groß. Ein Besucher oder eine Besucherin nutzt ein Tablet und das Bild ist dort im Browser 600 x 400 px groß. Das Lazy Loader-Modul kann das optimale Bild in Größe 600 x 400 px laden, wodurch weniger Daten heruntergeladen werden müssen.
Das Modul nutzt für die Lazyload-Funktionalität JavaScript.
Funktionen
Mit dem Lazyloading-Modul können Sie
-
eine Lazyloading-Funktion für Bilder integrieren (betrifft auch Bilder im Visual CMS)
-
transparente Platzhalter für Bilder, die sich nicht im sichtbaren Bereich befinden, auf der Website darstellen lassen
-
einen speziellen Smarty-Tag im Template nutzen
-
definieren, ab wann Bilder optimiert werden sollen
-
definieren, ab wie vielen Aufrufen eines Bilds in einer bestimmten Auflösung das Lazy Loader-Modul anfängt, das Bild zu optimieren
Anforderungen für das Einbinden der Bilder im Shop
Damit das Lazy Loader-Modul das Laden der Bilder beeinflussen kann, müssen Sie Bilder folgendermaßen einbinden:
<img src="{PlatzhalterbildSolangeNochNichtGeladen}" data-src="{OriginalbildPfad}">
data-src muss gesetzt sein.
src mit dem Platzhalterbild ist optional.
Smarty-Tag
Wichtig: Smarty unterstützt keine Bindestriche. Daher müssen Sie bei Attributen wie
data_srcein Unterstrich verwenden. Im HTML-Code des Shop-Frontends wird der Unterstrich durch einen Bindestrich ersetzt.
Das Lazy Loader-Modul bietet ein Smarty-Tag, durch das Sie im Template
[{dximg src={OriginalbildPfad} weitereAttribute... }]
nutzen können.
Beispiel:
[{dximg src={OriginalbildPfad} data_image_width="{Original-Bildbreite} data_image_height="{Original-Bildhöhe}}]erzeugt:
<img src="{InlineSVG-PlatzhalterbildSolangeNochNichtGeladen}" data-src="{OriginalbildPfad}" data-image-width="{Original-Bildbreite}" data-image-height="{Original-Bildhöhe}">wobei das Platzhalter-Bild ein transparentes Bild mit den Abmessungen des Originalbilds ist.