如何检查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.