https://www.hotelmanagement-network.com/wp-content/themes/goodlife…/assets/js/modules/gdm-lazy-loading.js

1export default function GDMLazyLoading() {
2  const images = document.querySelectorAll("img");
3
4  // Images to not lazyload:
5  const swiperImages = document.querySelectorAll(".swiper-slide img");
6  const whitepaperCovers = document.querySelectorAll(
7    ".gdm-company-profile-unit__image-container img"
8  );
9  const SponsoredWhitepaperCovers = document.querySelectorAll(
10    ".sponsored-whitepaper img"
11  );
12  const lazyImages = [...images].filter(
13    (img) =>
14      ![
15        ...swiperImages,
16        ...whitepaperCovers,
17        ...SponsoredWhitepaperCovers,
18      ].includes(img)&&
19      !img.src.includes("ipad-frame.png")
20  );
21
22  lazyImages &&
23    [...lazyImages].forEach((img) => {
24      img.dataset.src = img.src;
25      img.src =
26        "/wp-content/themes/goodlife-wp-B2B/assets/img/placeholder_purple.gif";
27      img.classList.add("lazy-image");
28    });
29
30  const displayLazyContent = (entries, observer) => {
31    // const [entry] = entries;
32
33    entries.forEach((entry) => {
34      if (!entry.isIntersecting) return;
35
36      entry.target.src = entry.target.dataset.src;
37      entry.target.classList.remove("lazy-image");
38      entry.target.classList.add("lazy-loaded");
39
40      observer.unobserve(entry.target);
41    });
42  };
43  const lazyObserver = new IntersectionObserver(displayLazyContent, {
44    root: null, // observe the whole viewport
45    rootMargin: "0px",
46    threshold: 0,
47  });
48
49  lazyImages && lazyImages.forEach((img) => lazyObserver.observe(img));
50}