Lazy Loading in Listen

Veröffentlichungsdatum: 24. Oktober 2019
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE

Listen unterstützen bereits im Standard 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.

Listeneinstellung Allgemein - Lazyload
Listeneinstellung Allgemein - Lazyload

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 und über CSS definiert.

Lazy Loading kann in der listDefault.scss in den allgemeinen Einstellungen über die Auswahlbox "Ladecharakteristik" aktiviert oder deaktiviert werden.

  • Sofort laden
  • Erst laden, wenn im Anzeigebereich (entspricht lazyload)