如何在不阻塞 onload 或等待 onload 的情况下加载 iframe
[英]How to load an iframe without blocking onload or waiting for onload
问题描述
假设我有这个页面：
<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 的情况下加载 iframe
- 阻止我页面的
onload事件或 - 等到我的页面的
onload事件设置 iframe 的src属性
我想要#1，因为我不希望页面上的 JS 不得不等待 example.com 的慢速图像。
我想要#2，因为我想尽快开始加载example.com 的内容。
有两个类似的问题。
这就是它们不重复的原因：
- 也不清楚“阻止”加载意味着什么 - 我指定了
onload事件。 - 两者都没有指定我无法控制 iframe 的内容（#2 上的第一个答案假设）。
- 两者都没有指定在
onload之后设置src属性不是一个选项（#1 上的几个答案假设）。
虽然这些问题的答案可能会回答这个问题，但两者的措辞都不是答案必须回答这个问题。
3 个解决方案
解决方案1
7 2020-04-22 18:31:19
您可以按照charlietfl在评论中的建议使用Window: DOMContentLoaded 事件； 它不会被资源/资产加载阻止：
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>
当然，您可以在load上设置 iFrame src属性，但这已经包含在您链接的问题中：
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>
解决方案2
4 2020-04-28 02:08:10
一个不同的、更简单的技巧：像往常一样加载，但也包括
<link rel="prefetch" href="https://example.com/test.html">
在您页面的<head> 。
浏览器将开始为您获取 test.html（或巨大的.png） 。
它甚至不需要 iframe 存在，你可以把它放在任何页面中。 如果需要，您可以让浏览器在外部资源加载到需要它的特定页面之前就开始加载它。
当然，详细时间取决于浏览器的决定，但归根结底，所有异步请求都是如此——您可以将prefetch放在 doctype 内容之后。
解决方案3
2 2020-04-29 07:30:50
在现代浏览器中，您需要做的就是在 iframe 中添加loading="lazy" 。
<iframe src="test.html" loading="lazy" />
并非所有地方都支持它，但对于您的情况可能已经足够了？
加载后加载iframe
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.