<script>
    document.addEventListener("DOMContentLoaded", function() {
      var lazyImages = document.querySelectorAll('.lazy-load');

      var options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.5 // Adjust the threshold as needed
      };

      var observer = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            var lazyImage = entry.target;
            lazyImage.src = lazyImage.getAttribute('src');
            lazyImage.classList.add('loaded');
            observer.unobserve(lazyImage); // Stop observing once the image is loaded
          }
        });
      }, options);

      lazyImages.forEach(function(img) {
        observer.observe(img);
      });
    });
  </script>