JavaScript Academy · Lektion

Bilder verzögert laden

Laden Sie Bilder erst, wenn sie sichtbar werden.

Bilder verzögert laden ist eine kostenlose JavaScript 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 JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Die Idee des verzögerten Ladens

Beim verzögerten Laden wird das Herunterladen von Bildern aufgeschoben, bis sie kurz davorstehen, in den sichtbaren Bereich zu scrollen. Das spart Bandbreite und beschleunigt den initialen Seitenaufbau, insbesondere bei langen Seiten mit vielen Bildern.

Die tatsächliche URL speichern

Der entscheidende Trick: Setzen Sie die tatsächliche Bild-URL zunächst nicht in src. Speichern Sie sie in einem data-src-Attribut, damit der Browser sie noch nicht herunterlädt.

// Markup pattern:
// <img data-src="photo-large.jpg" alt="Scenery">
// The browser will not fetch anything until we set src.

Bilder für verzögertes Laden auswählen

Erfassen Sie alle Bilder, die verzögert geladen werden sollen. Eine verbreitete Konvention ist eine gemeinsame Klasse oder das Vorhandensein von data-src.

const lazyImages = document.querySelectorAll('img[data-src]');
console.log('found', lazyImages.length, 'lazy images');

Den Observer erstellen

Erstellen Sie einen Observer, dessen Callback das tatsächliche Bild lädt, sobald es sich mit dem sichtbaren Bereich überschneidet. Verwenden Sie rootMargin, damit das Laden des Bildes etwas vor seinem Erscheinen beginnt.

const observer = new IntersectionObserver((entries, obs) => {
  // handle entries here
}, { rootMargin: '100px' });

Beim Überschneiden laden

Wenn sich ein Bild mit dem sichtbaren Bereich überschneidet, kopieren Sie seinen Wert von data-src nach src. Der Browser lädt es dann herunter und zeigt es an.

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // triggers the download
    }
  });
}, { rootMargin: '100px' });

Nach dem Laden die Beobachtung beenden

Sobald ein Bild geladen ist, muss es nicht weiter beobachtet werden. Rufen Sie unobserve auf, um Ressourcen freizugeben und eine erneute Auslösung zu verhindern.

if (entry.isIntersecting) {
  const img = entry.target;
  img.src = img.dataset.src;
  obs.unobserve(img); // done watching this one
}

Die Beobachtung starten

Durchlaufen Sie jedes Bild mit verzögertem Laden und beginnen Sie, es zu beobachten. Der Observer kümmert sich um den Rest, während die Nutzerin oder der Nutzer scrollt.

lazyImages.forEach(img => observer.observe(img));

Einen Platzhalter anzeigen

Sorgen Sie für ein flüssiges Erlebnis, indem Sie während des Ladens des tatsächlichen Bildes einen winzigen verschwommenen Platzhalter oder eine Volltonfarbe anzeigen und das Bild dann beim load-Ereignis einblenden.

img.addEventListener('load', () => {
  img.classList.add('loaded'); // CSS can fade it in
});
img.src = img.dataset.src;

Das native loading-Attribut

Moderne Browser unterstützen außerdem natives verzögertes Laden über loading="lazy" bei img und iframe. Der Intersection Observer bleibt für benutzerdefinierte Steuerung, Animationen oder Fallback-Verhalten nützlich.

// Native approach (no JS needed):
// <img src="photo.jpg" loading="lazy" alt="...">

// Observer approach gives more control and effects.

data-src bereinigen

Nach dem Laden können Sie das Attribut data-src entfernen, damit das DOM übersichtlich bleibt und späterer Code oder spätere Abfragen nicht verwirrt werden.

img.src = img.dataset.src;
img.removeAttribute('data-src');
obs.unobserve(img);

Das vollständige Muster

Verzögertes Laden mit dem Intersection Observer ist ein übersichtliches und effizientes Muster: URLs in data-src speichern, jedes Bild beobachten, die tatsächliche URL bei einer Überschneidung einsetzen und anschließend die Beobachtung beenden. Das Ergebnis ist eine schnellere Seite, die Bilder genau zum richtigen Zeitpunkt lädt.

Schnelltest

Testen Sie Ihr Verständnis des verzögerten Ladens von Bildern.

Zusammenfassung

Sie haben das verzögerte Laden von Bildern implementiert:

Speichern Sie die tatsächliche URL in data-src.
Beobachten Sie jedes Bild mit einem Intersection Observer.
Kopieren Sie bei einer Überschneidung data-src nach src und rufen Sie unobserve auf.
Verwenden Sie rootMargin, um kurz vor dem Sichtbarwerden vorzuladen.
Das native loading="lazy" ist eine einfachere Alternative.

Als Nächstes implementieren wir unendliches Scrollen.

Häufig gestellte Fragen

Ist die Lektion „Bilder verzögert laden“ kostenlos?

Ja — der vollständige Text von „Bilder verzögert laden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Bilder verzögert laden“?

Laden Sie Bilder erst, wenn sie sichtbar werden. Du übst JavaScript 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 JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript 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 „Bilder verzögert laden“?

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 JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript 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

← Zurück zu JavaScript Academy