https://www.stratosjets.com/wp-content/themes/stratos/library/java…/intersection-observer.js?ver=1

1function buildThresholdList() {
2  let thresholds = [];
3  let numSteps = 20;
4
5  for (let i = 1.0; i <= numSteps; i++) {
6    let ratio = i / numSteps;
7    thresholds.push(ratio);
8  }
9
10  thresholds.push(0);
11  return thresholds;
12}
13
14const options = {
15  root: null,
16  rootMargin: "0px",
17  threshold: buildThresholdList()
18};
19
20const io = new IntersectionObserver(entries => {
21  entries.forEach(entry => {
22    // console.log('entry: ', entry);
23    if (entry.intersectionRatio > 0.0) {
24      loadImage(entry.target);
25      entry.target.classList.add("active");
26      // entry.target.innerHTML = '<h2>Loaded!</h2>';
27      io.unobserve(entry.target);
28    }
29  });
30}, options);
31
32const targetElements = document.querySelectorAll(".lazy-image");
33for (let element of targetElements) {
34  // console.log('element: ', element);
35  io.observe(element);
36}
37
38function loadImage(imageElement) {
39  setTimeout(() => {
40    if (imageElement && imageElement.querySelector("img")) {
41      // console.dir(imageElement.querySelector("img"));
42      imageElement.querySelector("img").src = imageElement.querySelector(
43        "img"
44      ).dataset.src;
45    }
46  }, 10);
47}
48
49//Lazy load background images
50document.addEventListener("DOMContentLoaded", function() {
51  var lazyBackgrounds = [].slice.call(
52    document.querySelectorAll(".lazy-background")
53  );
54
55  if (
56    "IntersectionObserver" in window &&
57    "IntersectionObserverEntry" in window &&
58    "intersectionRatio" in window.IntersectionObserverEntry.prototype
59  ) {
60    let lazyBackgroundObserver = new IntersectionObserver(function(
61      entries,
62      observer
63    ) {
64      entries.forEach(function(entry) {
65        if (entry.isIntersecting) {
66          entry.target.classList.add("visible");
67          lazyBackgroundObserver.unobserve(entry.target);
68        }
69      });
70    });
71
72    lazyBackgrounds.forEach(function(lazyBackground) {
73      lazyBackgroundObserver.observe(lazyBackground);
74    });
75  }
76});