https://albert-schweitzer-stiftung.de/assets/js/templates/home.7b40bb55f1d1ada6ff746f6b0ac7b12e.js

1window.onload = function () {
2  const basePath = "assets/img/hero-banner-animals/";
3
4  const heroImageObjects = [
5    { name: "Fisch", copyright: "Leonardo-Gonzalez – shutterstock" },
6    { name: "Schwein", copyright: "Marek-Piwnicki – unsplash" },
7    { name: "Huhn", copyright: "Steven van elk – unsplash" },
8    { name: "Rind", copyright: "Artur Pawlak – pixabay" },
9    { name: "Pute", copyright: "dezi – shutterstock" },
10  ];
11
12  const variants = {
13    mobile: {
14      img: document.getElementById("heroMobileImage"),
15      webp: document.getElementById("heroMobileWebp"),
16      suffix: "_mobil",
17    },
18    desktop: {
19      img: document.getElementById("heroImage"),
20      webp: document.getElementById("heroDesktopWebp"),
21      suffix: "",
22    },
23  };
24
25  const copyrightElement = document.querySelector(".home .hero-img .copyright");
26
27  const selected = heroImageObjects[Math.floor(Math.random() * heroImageObjects.length)];
28
29  // true, wenn das Element gerade gerendert wird (nicht display:none)
30  function isVisible(el) {
31    return !!el && el.getClientRects().length > 0;
32  }
33
34  function applyTo(variant) {
35    if (!variant.img || variant.applied) return;
36    const file = basePath + "Hero-" + selected.name + variant.suffix;
37    // srcset zuerst, dann src: so wählt der Browser direkt die WebP-Datei
38    if (variant.webp) variant.webp.srcset = file + ".webp";
39    variant.img.src = file + ".jpg";
40    variant.img.alt = selected.name;
41    variant.applied = true;
42  }
43
44  function update() {
45    Object.values(variants).forEach(function (variant) {
46      if (isVisible(variant.img)) applyTo(variant);
47    });
48  }
49
50  update();
51  if (copyrightElement) copyrightElement.textContent = selected.copyright;
52
53  // Falls das Fenster später über den Breakpoint gezogen wird
54  // (Desktop-Fenster verkleinert, Tablet gedreht), das andere Bild nachziehen
55  let resizeTimer;
56  window.addEventListener("resize", function () {
57    clearTimeout(resizeTimer);
58    resizeTimer = setTimeout(update, 200);
59  });
60};