Signatur
Beschreibung
Die Eigenschaft loading spiegelt das HTML-Attribut loading des <img>-Elements wider. Sie sagt dem Browser, ob ein Bild sofort geladen werden soll ("eager", Standard) oder erst dann, wenn es sich dem sichtbaren Bereich nähert ("lazy"). Damit bekommt man natives Lazy Loading, ganz ohne IntersectionObserver oder externe Bibliotheken.
Lazy Loading lohnt sich vor allem bei langen Seiten mit vielen Bildern, etwa Galerien, Produktlisten oder Kommentarbereichen. Es spart Bandbreite, verkürzt die anfängliche Ladezeit und entlastet das Netzwerk für wichtige Ressourcen. Bilder im sichtbaren Bereich beim ersten Laden („above the fold“), vor allem das LCP-Bild (Largest Contentful Paint), sollten dagegen nicht lazy geladen werden.
Der Wert ist nur ein Hinweis. Ab welchem Abstand zum Sichtfenster ein Bild geladen wird, entscheidet der Browser selbst, abhängig von Verbindungsqualität und Implementierung. Ungültige Werte werden beim Lesen als "eager" zurückgegeben.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | "eager" | "lazy" | "eager" | Neuer Lade-Hinweis beim Setzen. "eager" lädt sofort, "lazy" verzögert das Laden, bis das Bild in die Nähe des Sichtfensters kommt. |
Rückgabewert
"eager" oder "lazy". Fehlt das Attribut oder ist es ungültig, wird "eager" zurückgegeben.Beispiele
Dynamisch erzeugte Galerie-Bilder lazy laden
const gallery = document.querySelector('#gallery');
const urls = Array.from({ length: 50 }, (_, i) => `/img/foto-${i + 1}.jpg`);
urls.forEach((url, index) => {
const img = document.createElement('img');
// Die ersten 4 Bilder sind sofort sichtbar -> eager, der Rest lazy
img.loading = index < 4 ? 'eager' : 'lazy';
img.src = url;
img.alt = `Foto ${index + 1}`;
img.width = 300;
img.height = 200; // feste Maße verhindern Layout-Verschiebungen
gallery.append(img);
});
console.log(gallery.querySelectorAll('img[loading="lazy"]').length);Aktuellen Wert auslesen und Standardverhalten prüfen
const img = new Image();
console.log(img.loading); // kein Attribut gesetzt
img.setAttribute('loading', 'irgendwas');
console.log(img.loading); // ungültiger Wert
img.loading = 'lazy';
console.log(img.getAttribute('loading'));Feature-Erkennung mit Fallback auf IntersectionObserver
const supportsLazy = 'loading' in HTMLImageElement.prototype;
const images = document.querySelectorAll('img[data-src]');
if (supportsLazy) {
images.forEach((img) => {
img.loading = 'lazy';
img.src = img.dataset.src;
});
} else {
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
obs.unobserve(entry.target);
}
});
}, { rootMargin: '200px' });
images.forEach((img) => observer.observe(img));
}
console.log(supportsLazy ? 'Natives Lazy Loading' : 'Fallback aktiv');// Wichtig · Fallstricke
- Reihenfolge beachten:
loadingmuss vorsrcgesetzt werden. Wird zuerstsrczugewiesen, kann der Browser den Download sofort starten, und der Hinweis wirkt nicht mehr. - Nicht für sichtbare Bilder: Wird das LCP-Bild oder ein Hero-Bild mit
"lazy"markiert, verschlechtern sich die Core Web Vitals. Für solche Bilder istfetchPriority = "high"die bessere Wahl. - Maße angeben: Ohne
width/heightoder CSS-aspect-ratiohaben lazy geladene Bilder anfangs die Größe 0 × 0. Das führt zu Layout-Verschiebungen (CLS) und kann dazu führen, dass zu viele Bilder auf einmal als sichtbar gelten. - JavaScript deaktiviert: Browser laden lazy markierte Bilder nur, wenn JavaScript aktiv ist, damit sich die Scroll-Position nicht zum Verfolgen von Nutzern ausnutzen lässt. Ohne JavaScript werden solche Bilder sofort geladen.
- Versteckte Bilder: Bilder mit
display: nonewerden bei"lazy"meist gar nicht geladen, bei"eager"dagegen schon. - Kompatibilität: Wird von allen aktuellen Browsern unterstützt, Safari erst ab 15.4. In älteren Browsern wird die Eigenschaft ignoriert und das Bild ganz normal sofort geladen, die Seite funktioniert also trotzdem. Dasselbe Attribut gibt es auch für
<iframe>(HTMLIFrameElement.loading).