// ! Required Bootstrap for best experience.

// Lazy Load images
const targets = document.querySelectorAll(".lazy");

// Callback for images
const imagesLazyLoad = (target) => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        
        const src = img.getAttribute("data-lazy");
        img.parentElement.style.backgroundColor = "#d4d4d4"
        img.parentElement.classList.add("placeholder-wave")
        
        img.setAttribute("src", src);
        img.onload = function() {
          img.classList.add("fade-in");
          img.parentElement.classList.remove("placeholder-wave")
          img.parentElement.style.backgroundColor = ""
        }

        observer.disconnect();
      }
    });
  });

  io.observe(target);
};

targets.forEach(imagesLazyLoad);