https://www.huehner-shop.com/templates/admorris_pro_child/js/deferOffscreenImagesOpc.js

1// Function to get the fold position
2function getFoldPosition() {
3  return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
4}
5
6// Function to get the top position of an element
7function getElementTopPosition(element) {
8  const rect = element.getBoundingClientRect();
9  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
10  return rect.top + scrollTop;
11}
12
13// Function to add the 'lazy' class to images below the fold and update the src attribute
14function lazyLoadImagesOpc() {
15  const images = document.querySelectorAll('.opc-Container img, .banner img, .img-aspect-ratio');
16  const foldPosition = getFoldPosition();
17
18  for (let i = 0; i < images.length; i++) {
19    const imageTopPosition = getElementTopPosition(images[i]);
20
21    if (imageTopPosition > foldPosition) {
22      images[i].classList.add('lazy');
23      const src = images[i].getAttribute('src');
24      const srcset = images[i].getAttribute('srcset');
25
26      if (src) {
27        images[i].setAttribute('data-src', src);
28        images[i].removeAttribute('src');
29      }
30      if (srcset) {
31        images[i].setAttribute('data-srcset', srcset);
32        images[i].removeAttribute('srcset');
33      }
34    }
35  }
36}
37
38window.addEventListener('DOMContentLoaded', lazyLoadImagesOpc);