如何檢查DOM元素是否已完全加載？
[英]How to check if DOM element is fully loaded?
問題描述
我正在加載包含數千個元素的非常大的網頁。 如何測試節點是否已完全加載，包括它自身和所有子元素，但我不想等待整個頁面被加載。 例如，讓我們擁有此頁面：
<html> <head> <script> var cnt = 0; var id = setInterval(function test() { var e = document.querySelector('#content') if (!e) return; // how to test is "e" fully loaded ? if (cnt == e.childNodes.length) { clearInterval(id); } else { cnt = e.childNodes.length; console.log(cnt); } }, 10); </script> </head> <body> <div id="content"> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div> <!-- ... add 30k div elements --> </div> </body> </html>
這將在控制台上打印如下內容：
4448 9448 14448 19448 24948 30000
2 個解決方案
解決方案1
0 2015-03-07 16:17:40
說您要在div＃content加載后發出警報。 如果您將javascript放在div的結束標記之后，它將在加載腳本之前的所有html后運行。
<div id="content">
// your content
</div>
<script type="text/javascript">
alert("finished loading until this point");
</script>
解決方案2
0 2018-08-13 13:13:07
我認為load event將是您問題的更恰當答案。 加載所有內容（包括圖像和其他資源）時，它可能會變得很麻煩並觸發。
您可以在此處找到一些示例。
https://developer.mozilla.org/zh-CN/docs/Web/Events/load https://www.w3schools.com/jsref/event_onload.asp
但是如果您不在乎資源，那么您可能不妨看一下。
使用 Chrome 擴展將元素添加到完全加載的 DOM
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.