Home » Webdesign lernen » Lazy Loading für Bilder und Videos

Lazy Loading für Bilder und Videos – Ladezeiten optimieren

Lazy Loading bedeutet, dass Medien wie Bilder oder Videos erst dann geladen werden, wenn sie im sichtbaren Bereich des Nutzers (Viewport) erscheinen. Dadurch sparst du wertvolle Bandbreite und beschleunigst das Laden deiner Webseite.

---

1. Native Lazy Loading mit HTML

Moderne Browser unterstützen das Attribut loading="lazy" für Bilder und Iframes. Ganz einfach nutzen:

<img src="bild.jpg" alt="Beispielbild" loading="lazy" />
<iframe src="video-embed.html" loading="lazy"></iframe>

Vorteil: Keine Extra-JavaScript-Bibliothek nötig, funktioniert einfach und performant.

---

2. Lazy Loading mit Intersection Observer API (JavaScript)

Für ältere Browser oder zum Lazy Load von Videos verwenden wir die moderne Intersection Observer API. Sie erkennt, ob ein Element sichtbar ist.

HTML Beispiel

<!-- Bild: src in data-src -->
<img class="lazy" data-src="https://via.placeholder.com/600x400?text=Bild+1" alt="Bild 1" width="600" height="400" />

<!-- Video: Quelle (source) in data-src -->
<video class="lazy" width="600" height="400" controls muted preload="none">
  <source data-src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
  Dein Browser unterstützt das Video-Tag nicht.
</video>

JavaScript zum Nachladen

document.addEventListener("DOMContentLoaded", function() {
  let lazyElements = [].slice.call(document.querySelectorAll(".lazy"));

  if ("IntersectionObserver" in window) {
    let lazyObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let el = entry.target;

          if (el.tagName.toLowerCase() === "img") {
            el.src = el.dataset.src;
            el.addEventListener('load', () => el.classList.add('loaded'));
          }
          else if (el.tagName.toLowerCase() === "video") {
            let sources = el.querySelectorAll("source");
            sources.forEach(source => {
              source.src = source.dataset.src;
            });
            el.load();
            el.classList.add('loaded');
          }

          lazyObserver.unobserve(el);
        }
      });
    });

    lazyElements.forEach(function(lazyEl) {
      lazyObserver.observe(lazyEl);
    });
  } else {
    // Fallback für alte Browser - alle sofort laden
    lazyElements.forEach(function(el) {
      if (el.tagName.toLowerCase() === "img") {
        el.src = el.dataset.src;
      } else if (el.tagName.toLowerCase() === "video") {
        let sources = el.querySelectorAll("source");
        sources.forEach(source => {
          source.src = source.dataset.src;
        });
        el.load();
      }
      el.classList.add('loaded');
    });
  }
});

---

Schritt-für-Schritt Erklärung

• Bilder/Videos bekommen ihre Quelle (src) in ein data-src-Attribut.
• Die Klasse lazy sorgt für einen verschwommenen Effekt bis zum Laden.
• Der Intersection Observer beobachtet, wann die Medien im Viewport sichtbar sind.
• Beim Sichtbarwerden wird die Quelle in src gesetzt und somit geladen.
• Danach wird die Klasse loaded gesetzt, um die Unschärfe zu entfernen.
• Für alte Browser gibt es einen Fallback, der alle Medien sofort lädt.

---

Demo

Unten siehst du lazy geladene Bilder und Videos. Scrolle langsam nach unten!