Klassischerweise wird eine Website bei ihrem Aufruf vollständig geladen (Eager Load). Lazy Load ermöglicht es jedoch Inhalte einer Website erst dann zu laden, wenn sie in das Sichtfeld des Browsers gelangen. So werden die Bilder der Seite erst geladen, wenn der Besucher sie sehen kann. Dadurch beschleunigt sich die Ladezeit und der Daten-Verbrauch wird reduziert.
Ist Lazy Load aktiviert, wird aus allen <img>-Tags die Adresse im src-Attribut entfernt und durch ein kleines, transparentes GIF ersetzt.
Vor der Anpassung für Lazy Load
<img src="mein-bild.png" alt="Mein Bild">
Nach der Anpassung für Lazy Load
<img data-src="mein-bild.png" src="data:image/gif;base64,R0lGODdhAQABAIAAANk7awAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw==" alt="Mein Bild">
Sowie das Bild in das Sichtfeld (Viewport) des Browsers gelangt, wird via JavaScript die ursprüngliche Adresse des Bildes wiederhergestellt und das Bild angezeigt. Erst in diesem Moment wird das Bild auch vom Server geladen.
Dabei kommt die Intersection Observer API zum Einsatz, die von modernen Browsern unterstützt wird. Bei älteren Browsern, die diese API nicht unterstützen, wird das Bild automatisch sofort geladen.