italia2024/js/responsejs@0.10.1/response-lazy.js

Italia 2024 assets

//response-lazy.js
const BREAKPOINTS = [0, 432, 744, 768, 960, 1200].sort((a, b) => a - b);

document.addEventListener("DOMContentLoaded", function () {
  const lazyElements = [].slice.call(document.querySelectorAll("img.lazy, iframe.lazy, embed.lazy, object.lazy, video.lazy"));

  if ("IntersectionObserver" in window) {
    const observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          const element = entry.target;
          const src = getSourceForBreakpoint(element);
          if (src) {
            if (element.tagName === "VIDEO") {
              updateVideoSources(element, src);
              element.load();
            } else {
              element.src = src;
            }
            element.classList.remove("lazy");
            observer.unobserve(element);
          } else {
            console.warn(`No source found for element:`, element);
          }
        }
      });
    }, {
      rootMargin: "0px",
      threshold: 0.1
    });

    lazyElements.forEach(element => observer.observe(element));
  }
});


function getSourceForBreakpoint(element) {
  const windowWidth = window.innerWidth;
  let attribute = element.tagName === "SOURCE" ? "srcset" : "src";
  for (let i = BREAKPOINTS.length - 1; i >= 0; i--) {
    if (windowWidth > BREAKPOINTS[i]) {
      attribute = `${attribute}${BREAKPOINTS[i]}`;
      break;
    }
  }
  return element.dataset[attribute] || element.getAttribute(attribute);
}


function updateVideoSources(videoElement, src) {
  let source = videoElement.querySelector("source");
  if (!source) {
    source = document.createElement("source");
    videoElement.appendChild(source);
  }
  source.src = src;
}