Beim Aufruf einer Webseite lädt der Browser alle benötigten Ressourcen, um diese Seite wie gewünscht darzustellen. Dabei werden alle Objekte aufgerufen, auch wenn diese nicht im sichtbaren Bereich, sondern „under the fold“ (dt. frei: außerhalb der Sichtweite) liegen. Das kostet unter anderem auch unnötige Ladezeit. Um dem entgegenzuwirken setzen Entwickler Lazy Loading ein. Mithilfe eines Scripts wie beispielsweise LazyLoad lädt der Browser Bilder und andere Daten erst dann, wenn Sie im Viewport (sichtbaren Bereich) des Nutzers auftauchen – zum Beispiel beim Scrollen oder Vergrößern des Browserfensters.
Am besten lässt sich die Funktionsweise der LazyLoad-Methode am Beispiel von Bild-Objekten erklären: Um Lazy Loading nutzen zu können, müssen Sie das Markup des img-Tags anpassen. Statt des src-Attributs verwendet die Methode nämlich ein knowledge-Attribut inklusive passender Quellenangabe. Sobald das Bild im sichtbaren Bereich ist, fügt das jeweilige Script das src-Attribut mithilfe des knowledge-Attributs hinzu und das Bild erscheint. Um den Ladevorgang ansprechender zu gestalten, können Sie Fade-in oder Slide-in Effekte nutzen.