如何在不阻塞 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.