window.onload = function () {
  // Get all <img> elements with loading="lazy"
  var lazyImages = document.querySelectorAll('img[loading="lazy"]');

  // Loop through each image and apply the fade-in effect
  lazyImages.forEach(function (lazyImage) {
      lazyImage.style.opacity = 0;
      lazyImage.classList.add("lazy-image")

      // Create an image element to check when it's loaded
      var img = new Image();
      img.src = lazyImage.src;
      img.onload = function () {
          lazyImage.style.opacity = 1;
      };
  });
};