# Lazy Loading

# Lazy Loading von Bildern

Bilder sollten erst dann vom Browser heruntergeladen und angezeigt werden, wenn diese sich im Sichtbereich befinden. Dafür benutzt hubble die Komponente von Markus Oberlehner (opens new window) /components/utils/ImgLazy.vue in Verbindung mit Lozad.js (opens new window). hubble erweitert diese Komponente um alt und title Informationen.

Die Bildgrößen sollten gesetzt werden um CLS (opens new window) zu verhindern.

<img-lazy
    :src="require('~/assets/images/app/logo.png')"
    :alt-info="'Logo'"
    :title-info="'Logo'"
    :width="500"
    :height="200"
/>
1
2
3
4
5
6
7