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
1. 也不清楚“阻止”加载的含义-我指定了onload事件。
2. 均未指定我无法控制iframe的内容（第2个问题的第一个答案是假定的）。
3. 都没有指定在src之后设置onload属性不是一种选择（在＃1上有几个答案都假定）。

虽然这些问题的答案可能可以回答，但措辞都不是答案必须回答这一问题。

Answer 1

您可以按照Window: DOMContentLoaded event在评论中的建议使用charlietfl；它不会被资源/资产加载所阻止：

DOMContentLoaded 事件在完全加载并解析了初始HTML文档时触发，而无需等待样式表，图像和子帧完成加载。

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

// 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>

您当然可以在src上设置iFrame 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>

Answer 2

一种不同且更容易的技巧：照常进行加载，但还包括

mapSet['infoWindowsObj']

在页面的<link rel="prefetch" href="https://example.com/test.html">中。

浏览器将start fetching test.html (or huge.png) for you。

它甚至不需要iframe存在，您可以将其放在任何页面中。如果需要，可以让浏览器甚至在需要它的特定页面上就开始加载外部资源。

详细的时间当然取决于浏览器的决定，但是对于所有异步请求而言，最终一天都是正确的-您可以将<head>放在文档类型之后。

Answer 3

在现代浏览器中，您需要做的就是将loading="lazy"添加到iframe中。

<iframe src="test.html" loading="lazy" />

是not supported everywhere，但也许足以应付您的情况？

如何在不阻止加载或等待加载的情况下加载iframe

3 个答案: