Lazy Loading Images Not Working Fix

<!-- Wrong — loading attribute on the wrong element -->
<div loading="lazy">
  <img src="photo.jpg" alt="Photo">
</div>

<!-- Right — loading attribute on the <img> tag itself -->
<img src="photo.jpg" alt="Photo" loading="lazy">

<!-- Wrong — images in the initial viewport (loading="lazy" has no effect) -->
<img src="hero.jpg" alt="Hero" loading="lazy">
<!-- First 3 images are in the viewport — browser loads them immediately -->

<!-- Right — only lazy load images below the fold -->
<img src="hero.jpg" alt="Hero"><!-- No lazy attr — above the fold -->

<img src="photo-1.jpg" alt="Photo 1" loading="lazy">
<img src="photo-2.jpg" alt="Photo 2" loading="lazy">
<!-- Images below the fold are loaded lazily -->

// Wrong — relying only on native lazy loading
// Old browsers (Safari <16) do not support loading="lazy"

// Right — use native with Intersection Observer fallback
document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll("img[loading='lazy']");

  if ("IntersectionObserver" in window) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          img.removeAttribute("loading");
          observer.unobserve(img);
        }
      });
    });

    lazyImages.forEach(img => observer.observe(img));
  } else {
    // Fallback: load all images immediately
    lazyImages.forEach(img => {
      img.src = img.dataset.src;
    });
  }
});

// Wrong — lazy loading not applied to dynamically added images
function addImage(src) {
  const img = document.createElement("img");
  img.src = src;
  document.body.appendChild(img);
  // No lazy loading — loads immediately
}

// Right — apply lazy loading to dynamic images
function addImage(src) {
  const img = document.createElement("img");
  img.src = src;
  img.loading = "lazy";
  // Or use data-src pattern
  // img.dataset.src = src;
  document.body.appendChild(img);
}