Was ist Lazy Loading in Listen?

Lazy Loading in Listen sorgt dafür, dass Bilder erst dann geladen werden, wenn sie sich im sichtbaren Anzeigebereich befinden. Dadurch kann insbesondere bei langen Listen mit Vorschaubildern die übertragene Datenmenge reduziert werden.

Welche Vorteile bietet Lazy Loading bei Listen?

Der Hauptvorteil besteht darin, dass nicht alle Bilder sofort geladen werden müssen. Besonders auf kleinen Bildschirmen und bei langen Listen mit Vorschaubildern kann dies die Ladezeit verbessern und den Datenverbrauch deutlich senken.

Werden HD-Bilder beim Lazy Loading ebenfalls berücksichtigt?

Ja, auch HD-Bilder werden berücksichtigt. Sie werden abhängig vom Device-Pixel-Ratio des Endgerätes geladen, sobald sie sichtbar sind.

Müssen Templates angepasst werden, um Lazy Loading in Listen zu nutzen?

Nein, in aktuellen BASE-Projekten sind keine Anpassungen an den Templates notwendig. Die Funktionalität wird über die ui.js bereitgestellt.

Wie wird Lazy Loading in Listen aktiviert?

Damit Lazy Loading in Listen verwendet werden kann, muss die Funktion zunächst global in der Projektkonfiguration erlaubt werden.

Lazy Loading in Listen

Startseite

Veröffentlichungsdatum: 29. Juni 2013
Änderungsdatum: 19. Februar 2021

weblication cms lazy loading listen

Listen unterstützen ab sofort Lazy Loading, um Bilder erst zu laden, wenn diese sich im Anzeigebereich befinden.

Listen unterstützen ab sofort Lazy Loading, um Bilder erst zu laden, wenn diese sich im Anzeigebereich befinden. Besonders bei kleinen Bildschirmen in Verbindung mit langen Listen, die Vorschaubilder enthalten, lässt sich die übertragene Datenmenge so teilweise deutlich reduzieren.

Beim Einsatz von HD-Bildern, werden auch diese berücksichtigt und abhängig vom Device-Pixel-Ratio des Endgerätes geladen, sobald sie sichtbar sind.

Quelltext eines Lazy Loading Bildes

 <img data-src="/bild.jpg" src="/trans.gif" alt="" height="180" width="240" class="listEntryThumbnail wglLazyLoad wglLazyLoadInit"/>

Um Lazy Loading zu nutzen, sind keinerlei Anpassungen in Templates der aktuellen BASE notwendig. Die Funktionalität wird, wie inzwischen auch die HD-Funktion, in der ui.js abgebildet.

Wer Lazy Loading in Listen aktivieren will, muss dies davor zuerst global in der Projektkonfiguration erlauben.

FAQs are only visible for Weblication ai search and editors!

Was ist Lazy Loading in Listen?: Lazy Loading in Listen sorgt dafür, dass Bilder erst dann geladen werden, wenn sie sich im sichtbaren Anzeigebereich befinden. Dadurch kann insbesondere bei langen Listen mit Vorschaubildern die übertragene Datenmenge reduziert werden.
Welche Vorteile bietet Lazy Loading bei Listen?: Der Hauptvorteil besteht darin, dass nicht alle Bilder sofort geladen werden müssen. Besonders auf kleinen Bildschirmen und bei langen Listen mit Vorschaubildern kann dies die Ladezeit verbessern und den Datenverbrauch deutlich senken.
Werden HD-Bilder beim Lazy Loading ebenfalls berücksichtigt?: Ja, auch HD-Bilder werden berücksichtigt. Sie werden abhängig vom Device-Pixel-Ratio des Endgerätes geladen, sobald sie sichtbar sind.
Müssen Templates angepasst werden, um Lazy Loading in Listen zu nutzen?: Nein, in aktuellen BASE-Projekten sind keine Anpassungen an den Templates notwendig. Die Funktionalität wird über die <code class="codeInline">ui.js</code> bereitgestellt.
Wie wird Lazy Loading in Listen aktiviert?: Damit Lazy Loading in Listen verwendet werden kann, muss die Funktion zunächst global in der Projektkonfiguration erlaubt werden.
Wie sieht der Quelltext eines Lazy-Loading-Bildes aus?: Ein Beispiel für den Quelltext ist: <pre><code class="codeBlock" style="color: #000000">html <img data-src="/bild.jpg" src="/trans.gif" alt="" height="180" width="240" class="listEntryThumbnail wglLazyLoad wglLazyLoadInit"/> </code></pre> Dabei verweist <code class="codeInline">data-src</code> auf das eigentliche Bild, während zunächst ein Platzhalter über <code class="codeInline">src</code> geladen wird.