https://www.elle.cz/js/modules/gallery/lazyAds.js

1const DEFAULT_RENDER_DISTANCE_IN_VIEWPORTS = 3;
2
3export function createLazyAdLoader({
4  owner,
5  loadAdvert,
6  renderDistanceInViewports = DEFAULT_RENDER_DISTANCE_IN_VIEWPORTS
7}) {
8  const observers = new Map();
9
10  const load = (containerElement) => {
11    if (typeof loadAdvert !== 'function') {
12      return;
13    }
14
15    loadAdvert(containerElement);
16  };
17
18  const disconnect = (containerElement) => {
19    const observer = observers.get(containerElement);
20    observer?.disconnect?.();
21    observers.delete(containerElement);
22  };
23
24  const observe = (containerElement) => {
25    if (observers.has(containerElement)) {
26      return;
27    }
28
29    if (typeof window.IntersectionObserver !== 'function') {
30      load(containerElement);
31      return;
32    }
33
34    const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
35    const observer = new IntersectionObserver((entries) => {
36      entries.forEach((entry) => {
37        if (!entry.isIntersecting) {
38          return;
39        }
40
41        load(containerElement);
42        disconnect(containerElement);
43      });
44    }, {
45      root: null,
46      rootMargin: `${viewportHeight * renderDistanceInViewports}px`,
47      threshold: Array.from({length: 6}, (_, index) => index / 5)
48    });
49
50    observer.observe(containerElement);
51    observers.set(containerElement, observer);
52  };
53
54  const prepare = () => {
55    if (!owner || !window.burdaAds?.queue) {
56      return;
57    }
58
59    window.burdaAds.queue.push(() => {
60      owner
61        .querySelectorAll('[data-advert-container-loading="lazy"]')
62        .forEach(observe);
63    });
64  };
65
66  return {prepare, observe, disconnect};
67}