document.addEventListener('DOMContentLoaded', () => {
let lazyImages = document.querySelectorAll('.lazy-load');

let lazyLoadCallback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      let img = entry.target;
      img.src = img.dataset.src;
      img.onload = () => {
        img.classList.add('loaded');
      };
      observer.unobserve(img);
    }
  });
};

let observer = new IntersectionObserver(lazyLoadCallback, {
  root: null,
  rootMargin: '0px',
  threshold: 0.1
});

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