Lazy Loading für Bilder & Videos.

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

<!-- Bild: src in data-src -->
<img class="lazy" data-src="bild-1.jpg" 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="video.webm" type="video/webm">
  Dein Browser unterstützt das Video-Tag nicht.
</video>

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');
    });
  }
});

.lazy {
  filter: blur(12px);
  transition: filter 0.6s ease;
}
.lazy.loaded {
  filter: none;
}