32 lines
887 B
JavaScript
32 lines
887 B
JavaScript
// ! 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); |