Lazy Loading mit IntersectionObserver
Verzögern Sie das Laden von Bildern und Inhalten, bis sie den Viewport erreichen
Lazy Loading mit IntersectionObserver ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Über natives loading="lazy" hinaus
Das native Lazy Loading deckt <img> und <iframe> ab. Für alles andere – Hintergrundbilder, Videos, aufwendige Komponenten und Widgets von Drittanbietern – ist IntersectionObserver das richtige Werkzeug, um Arbeit bis kurz vor dem Eintritt des Elements in den Viewport aufzuschieben.
Das Muster
Markieren Sie zurückgestellte Elemente mit einem data-src-Attribut, das die tatsächliche Quelle enthält, und rendern Sie einen winzigen Platzhalter. Beobachten Sie jedes Element. Bei einer Überschneidung ersetzen Sie data-src durch src (oder aktivieren das Element auf andere Weise) und rufen unobserve auf, damit der Callback nicht erneut ausgelöst wird.
<img class="lazy" data-src="/photo.jpg" alt="Photo" width="800" height="600">
<script>
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
}
}, { rootMargin: "200px" });
document.querySelectorAll(".lazy").forEach((img) => observer.observe(img));
</script>Lazy Loading von Hintergrundbildern
CSS background-image kann nativ nicht per Lazy Loading geladen werden. Setzen Sie bei einer Überschneidung el.style.backgroundImage = `url("${el.dataset.bg}")` oder fügen Sie eine CSS-Klasse hinzu, die background-image definiert. Das Herunterladen des Bildes beginnt in diesem Moment.
Lazy Loading von Videos
Bei Videos unterhalb des anfänglichen sichtbaren Bereichs lassen Sie src und source-Elemente zunächst weg. Fügen Sie bei einer Überschneidung die <source>-Tags ein und rufen Sie video.load() auf. Andernfalls werden Videometadaten möglicherweise sofort geladen, noch bevor der Benutzer in die Nähe des Elements scrollt.
Widgets von Drittanbietern
Einbettungen sozialer Medien, Kommentar-Widgets und Chat-Skripte laden mehrere Megabyte. Importieren Sie das Setup-Skript des Widgets bei einer Überschneidung dynamisch: await import("/embed.js"). Die Kosten entstehen nur, wenn der Benutzer tatsächlich zu diesem Abschnitt scrollt.
Lazy Loading von Iframes (über loading="lazy" hinaus)
Das native Lazy Loading von Iframes lädt das Iframe-Dokument trotzdem herunter. Verwenden Sie für umfangreiche Einbettungen wie Karten oder Videoplayer das „Facade“-Muster: Zeigen Sie ein Platzhalterbild an und ersetzen Sie es bei einem Klick oder einer Überschneidung durch das echte Iframe. Dadurch verringert sich die Größe der initial geladenen Seite erheblich.
rootMargin zum Vorabladen
rootMargin: "200px" beginnt 200 px vor dem Eintritt des Elements in den Viewport mit dem Laden. Stimmen Sie den Wert auf die Scrollgeschwindigkeit ab: Ist er zu klein, sehen Benutzer beim schnellen Scrollen Platzhalter; ist er zu groß, wird der Zweck des Lazy Loadings verfehlt, weil alles geladen wird.
Nach der Auslösung unobserve aufrufen
Rufen Sie nach der Aktivierung des Lazy Loadings immer observer.unobserve(element) auf. Andernfalls wird der Callback jedes Mal weiter ausgelöst, wenn das Element erneut in den Viewport gelangt. Das verbraucht CPU und kann Fehler verursachen, wenn die Aktivierung nicht idempotent ist.
Platz reservieren
Legen Sie für Lazy-Loading-Bilder width und height sowie für Lazy-Loading-Container eine min-height fest. Ohne explizite Abmessungen wird die Seite beim Laden des Inhalts neu angeordnet. Das führt zu störenden Sprüngen beim Scrollen und einem schlechten Wert für Cumulative Layout Shift.
Fallback für No-JS
Für vollständige Progressive Enhancement umschließen Sie das Lazy-Loading-Element in <noscript> mit der echten src: <noscript><img src="/photo.jpg"></noscript>. Benutzer ohne JavaScript erhalten das Bild sofort; Benutzer mit JavaScript erhalten die Lazy-Loading-Version. Kombinieren Sie dies mit einem passenden data-src-Markup.
Viele Elemente gebündelt beobachten
Eine einzige Observer-Instanz kann effizient Hunderte von Elementen beobachten. Erstellen Sie nicht für jedes Element einen eigenen Observer. Erstellen Sie stattdessen einen gemeinsamen Observer mit den gewünschten Optionen und registrieren Sie jedes Ziel mit observe().
Mit nativem loading="lazy" kombinieren
Verwenden Sie für <img> speziell loading="lazy" als primären Mechanismus und setzen Sie IntersectionObserver nur dort ein, wo das native Lazy Loading nicht ausreicht. Beide Verfahren lassen sich gut kombinieren: Das native Lazy Loading übernimmt Bilder unterhalb des sichtbaren Bereichs; IntersectionObserver übernimmt Hintergründe, Komponenten und andere benutzerdefinierte Loader.
Wissenscheck
Warum ist es wichtig, observer.unobserve(element) aufzurufen, nachdem ein Element per Lazy Loading aktiviert wurde?
Zusammenfassung
IntersectionObserver erweitert Lazy Loading über das native <img loading="lazy"> hinaus auf Hintergründe, Videos, Widgets von Drittanbietern und dynamische Komponentenimporte. Verwenden Sie data-src-Platzhalter, tauschen Sie die Quelle bei einer Überschneidung aus und rufen Sie nach der Aktivierung unobserve auf. Laden Sie mit rootMargin vorab, reservieren Sie mit width/height Platz, stellen Sie einen noscript-Fallback bereit und kombinieren Sie dies mit nativem Lazy Loading, wo es anwendbar ist.
Häufig gestellte Fragen
Ist die Lektion „Lazy Loading mit IntersectionObserver“ kostenlos?
Ja — der vollständige Text von „Lazy Loading mit IntersectionObserver“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Lazy Loading mit IntersectionObserver“?
Verzögern Sie das Laden von Bildern und Inhalten, bis sie den Viewport erreichen Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Lazy Loading mit IntersectionObserver“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- IntersectionObserver API und Schwellenwerte
- Lazy Loading mit IntersectionObserver
- Infinite-Scroll-Implementierung
- Scroll-gekoppelte Animationen einrichten