lazy-unload-iframes.js

(() => {
  const loadedIframes = []; // Holds { el, originalSrc }

  document.addEventListener(
    "load",
    (event) => {
      const iframe = event.target;

      if (!iframe.matches('iframe[loading="lazy"]')) return;

      // Store the original src if not already stored
      if (!iframe.dataset.originalSrc) {
        iframe.dataset.originalSrc = iframe.src;
      }

      // Add to the tracking queue
      loadedIframes.push({ el: iframe, originalSrc: iframe.dataset.originalSrc });

      // If more than 5 loaded iframes, reset the oldest one
      if (loadedIframes.length > 5) {
        const toReset = loadedIframes.shift();

        // Unload the iframe content
        toReset.el.src = 'about:blank';

        // Restore src and lazy loading
        setTimeout(() => {
          toReset.el.loading = 'lazy';
          toReset.el.src = toReset.originalSrc;
        }, 50);
      }
    },
    true // Capture phase
  );
})();