Lazy Loading in Listen

29.06.2013

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.