TweetDeckで画面に入っていない画像を読み込まないようにするUserScript

tweetdeck-lazy-load-images.user.js

// ==UserScript==
// @name        画像遅延読み込み for TweetDeck
// @version     0.1.0
// @author      mkizka
// @description TweetDeckで画面に入っていない画像を読み込まないようにするUserScript
// @homepage    https://gist.github.com/mkizka/7bbd96c630d92f3e679ee69614665d30
// @match       https://tweetdeck.twitter.com/*
// ==/UserScript==

(function () {
  function insertStyle(css) {
    const style = document.createElement("style");
    style.setAttribute("type", "text/css");
    style.textContent = css;
    document.head.appendChild(style);
  }
  function setLazyLoadObservers(target) {
    const intersectionObserver = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) {
          const style = e.target.style;
          style.setProperty(
            "background-image",
            style.backgroundImage,
            "important"
          );
        }
      }
    });
    const mutationObserver = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        mutation.addedNodes.forEach((node) => {
          if ("querySelector" in node) {
            const mediaItems = node.querySelectorAll(
              ".media-item, .media-image"
            );
            if (mediaItems) {
              mediaItems.forEach((item) => intersectionObserver.observe(item));
            }
          }
        });
      }
    });
    mutationObserver.observe(target, {
      childList: true,
      attributes: false,
      characterData: false,
      subtree: true,
    });
  }
  insertStyle(`
  .media-item,
  .media-image {
    background-image: none !important;
  }`);
  setLazyLoadObservers(document.body);
})();