https://theodore.net/assets/js/embeds.js

1// Load interactive embeds near the viewport without allowing their startup
2// focus to move the parent page. The wrapper keeps its authored dimensions
3// while the iframe finishes its hidden startup, then the iframe is revealed.
4(function () {
5  var observed = new WeakSet();
6  var observer = new IntersectionObserver(function (entries) {
7    entries.forEach(function (entry) {
8      if (!entry.isIntersecting) return;
9
10      var frame = entry.target;
11      var src = frame.dataset.src;
12      observer.unobserve(frame);
13      if (!src || frame.hasAttribute("src")) return;
14
15      var authoredStyle = frame.getAttribute("style");
16      frame.style.setProperty("display", "none", "important");
17      frame.addEventListener("load", function () {
18        setTimeout(function () {
19          if (authoredStyle === null) frame.removeAttribute("style");
20          else frame.setAttribute("style", authoredStyle);
21        }, 1000); // Let post-load startup scripts finish before the frame is focusable.
22      }, { once: true });
23      frame.src = src;
24    });
25  }, { rootMargin: "300px" });
26
27  function observeEmbeds() {
28    document.querySelectorAll("iframe[data-src]").forEach(function (frame) {
29      if (observed.has(frame)) return;
30      observed.add(frame);
31      observer.observe(frame);
32    });
33  }
34
35  if (typeof document$ !== "undefined") {
36    document$.subscribe(observeEmbeds);
37  } else if (document.readyState === "loading") {
38    document.addEventListener("DOMContentLoaded", observeEmbeds);
39  } else {
40    observeEmbeds();
41  }
42})();