https://www.rajapack.be/blog-be/wp-content/themes/RajaNext/src/js/df-lazyLoading.js

1document.addEventListener("DOMContentLoaded", function () {
2  const dflazyimages = document.querySelectorAll("img");
3  dflazyimages.forEach(function (img) {
4    if (!img.hasAttribute("loading")) {
5      let imgHtml = img.outerHTML.replace('<img', '<img loading="lazy"');
6      img.outerHTML = imgHtml;
7    }
8  });
9  // Lazy load background images custom
10  const lazyBackgrounds = document.querySelectorAll('.folder__block__contain[style*="background-image"]');
11  const observer = new IntersectionObserver((entries, observer) => {
12    entries.forEach(entry => {
13      if (entry.isIntersecting) {
14        const div = entry.target;
15        const bgStyle = div.style.backgroundImage;
16        const bgImageUrl = bgStyle.slice(5, -2); // Extract the URL from `url("...")`
17
18        div.style.backgroundImage = '';
19        const img = new Image();
20        img.src = bgImageUrl;
21        img.onload = () => {
22          div.style.backgroundImage = `url(${bgImageUrl})`;
23        };
24        observer.unobserve(div);
25      }
26    });
27  });
28
29  lazyBackgrounds.forEach(background => {
30    observer.observe(background);
31  });
32});