https://www.verbraucherzentrale.nrw/modules/contrib/image_sizes/js/image-sizes.js?v=1.0.4

1/**
2 * @file
3 * Defines JavaScript for the image_sizes module.
4 */
5
6(() => {
7  customElements.define(
8    "responsive-img",
9    class extends HTMLElement {
10      /** @type {ResizeObserver} - Observer for real image width. */
11      #ro = new ResizeObserver(([entry]) => {
12        ({ width: this.size } = entry.contentRect);
13        this.update();
14      });
15
16      /** @type {number} - The current width of the element. */
17      size = this.offsetWidth;
18
19      /** @type {boolean} - Whether the image has been loaded. */
20      loaded = false;
21
22      /** @type {HTMLImageElement|null} - The image element. */
23      img;
24
25      /** @type {ShadowRoot|null} - Shadowroot */
26      root;
27
28      constructor() {
29        super();
30        const internals = this.attachInternals();
31        this.root = internals.shadowRoot;
32
33        if (!this.root) {
34          this.root = this.attachShadow({ mode: "open" });
35          const template = this.querySelector("template");
36          this.root.appendChild(template.content.cloneNode(true));
37        }
38
39        this.img = this.shadowRoot.querySelector("img");
40      }
41
42      connectedCallback() {
43        this.#ro.observe(this);
44        this.update();
45        this.img?.addEventListener("load", this.imgLoaded.bind(this));
46      }
47
48      disconnectedCallback() {
49        this.#ro.disconnect();
50        this.img?.removeEventListener("load", this.imgLoaded.bind(this));
51      }
52
53      /**
54       * Update markup.
55       * @returns {void}
56       */
57      update() {
58        this.img.sizes = `${Math.round(this.size)}px`;
59      }
60
61      /**
62       * onLoad Callback.
63       * @returns {void}
64       */
65      imgLoaded() {
66        if (this.loaded) return;
67        this.loaded = this.img.complete;
68        this.img.classList.add("loaded");
69      }
70
71      /**
72       * Check if the element is in the viewport.
73       * @returns {boolean}
74       */
75      inViewport() {
76        const rect = this.getBoundingClientRect();
77        return (
78          rect.top >= 0 &&
79          rect.left >= 0 &&
80          rect.bottom <=
81            (window.innerHeight || document.documentElement.clientHeight) &&
82          rect.right <=
83            (window.innerWidth || document.documentElement.clientWidth)
84        );
85      }
86    }
87  );
88})();