Lazy Loading für Interaktive ImageMaps bzw. Erklärbilder

Navigation

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

Das Weblic® Interaktive ImageMap unterstützt im Standard (Oktober 2022) Lazy Loading. Bilder, die in dem Erklärbild für die Marker als Vorschaubild definiert wurden, werden erst geladen wenn der Benutzer den zugehörigen Button aktiviert.

Lazy Loading lädt die Bilder erst, wenn sie in den Anzeigebereich eines Benutzers kommen. Dadurch kann eine erhebliche Performancesteigerung beim Laden der Seite erzielt werden. Das ist speziell dann von Vorteil, wenn in der Seite über "Bedingte Container abhängig von der Bildschirmbreite" unterschiedliche ImageMaps geladen werden sollen.

Im aktuellen Standard ist Lazy Loading für das ImageMap Weblic^® bereits aktiviert. Bei älteren Projekten kann das manuell in der elementImageMap.scss über CSS-Only aktiviert werden.

Auszug aus elementImageMap.scss

/*@wCssFragment{class:elementImageMap;caption:Allgemein;selectable:no}*/
.elementImageMap {
  
  -w-loadMode:lazy; /* Lademodus [pre(Sofort)|lazy(Erst, wenn im Anzeigebereich)]*/  
....

}

Bitte beachten Sie, dass auch das Weblic® "Interaktive ImageMap, Erklärbild" auf aktuellem Stand sein muss.