javascript - 如何在不阻塞 onload 或等待 onload 的情况下加载 iframe

Question

假设我有这个页面:

<h1>Hello, world!</h1>
<iframe src="https://example.com/test.html"></iframe>

test.html 包含以下内容:

<img src="huge.png" />

huge.png由于某种原因是100mb。

我无法控制 test.html，但我必须在我的页面中包含 iframe。

有没有办法在没有的情况下加载 iframe

阻止我的页面的 onload事件或

等到我的页面的onload设置 iframe 的 src 的事件属性

我想要#1，因为我不希望我页面上的 JS 不得不等待 example.com 的慢图像。

我想要#2，因为我想尽快开始加载 example.com 的内容。

有两个类似的问题。

is there a way to load an iframe asynchronously

Javascript preload iframe without blocking the browser

这就是为什么它们不是重复的:

也不清楚“阻止”加载意味着什么 - 我指定 onload事件。

两者都没有指定我无法控制 iframe 的内容(＃2 的第一个答案假设)。

两者都没有指定设置 src onload 之后的属性不是一个选项(＃1的几个答案假设)。

虽然这些问题的答案可能会回答这个问题，但它们的措辞都不是答案必须回答这个问题。

Answer 1

您可以使用Window: DOMContentLoaded event根据 charlietfl 的建议在评论中；它不会被资源/ Assets 加载阻塞:

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

这是一个加载具有 2MB JPEG 图像的外部 iFrame 的演示片段；当你运行它时，你会看到 DOMContentLoaded在 iFrame 完全加载并运行自定义 Javascript 之前触发；然后当 iFrame 完成加载时，load iFrame 上的事件被调用，我们更新状态文本。

// On DOMContentLoaded set status text and start an ASCII animation
window.addEventListener('DOMContentLoaded', (event) => {
  document.getElementById('js-status').textContent = 'DOM fully loaded and parsed; staring JS code';

  const animation = new animascii({
      src: [
          ["0-----", "-----0"],
          ["-0----", "----0-"],
          ["--0---", "---0--"],
          ["---0--", "--0---"],
          ["----0-", "-0----"],
          ["-----0", "0-----"]
      ],
      display: document.getElementById("ascii-animation"),
      repeat: -1,
      delay: 120,
      font_size: 20
  }, function() {
      alert("Done!");
  });
});

// On iframe load event set status text
document.getElementsByTagName('iframe')[0].addEventListener('load', function() {
  document.getElementById('iframe-status').textContent = 'IFrame fully loaded';
});

iframe { width: 600px; height: 400px; }
h2 span { color: blue; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/rot.js/0.6.0/rot.min.js"></script>
<script src="https://www.cssscript.com/demo/ascii-animation-library-pure-javascript-animascii/animascii.js"></script>

<h2>DOM/JS status: <span id="js-status">(loading...)</span></h2>
<h2>IFrame status: <span id="iframe-status">(loading...)</span></h2>

<h3>Demo JS to check that JS is running after DOMContentLoaded and before iFrame finish loading</h3>
<div id="ascii-animation"></div>

<iframe src="https://zikro.gr/dbg/so/53583045/iframe.php"></iframe>

当然你可以设置 iFrame src load 上的属性，但这已经被您链接的问题所涵盖:

window.addEventListener('load', (event) => {
  document.getElementById('js-status').textContent = 'DOM fully loaded and parsed; staring JS code';
  document.getElementById('iframe-status').textContent = '(loading...)';
  document.getElementsByTagName('iframe')[0].setAttribute('src', 'https://zikro.gr/dbg/so/53583045/iframe.php');
});

document.getElementsByTagName('iframe')[0].addEventListener('load', (event) => {
  document.getElementById('iframe-status').textContent = 'IFrame fully loaded';
});

iframe { width: 600px; height: 400px; }
h2 span { color: blue; }

<h2>DOM/JS status: <span id="js-status">(loading...)</span></h2>
<h2>IFrame status: <span id="iframe-status">(not started yet)</span></h2>

<iframe></iframe>