如何检查DOM元素是否已完全加载

How to check if DOM element is fully loaded?

本文关键字：是否 加载 元素 DOM 何检查 检查      更新时间：2023-09-26

我正在加载一个包含数千个元素的非常大的网页。如何测试节点是否已完全加载，包括它自身和所有它的子元素，但我不想等待整个页面加载。例如，让我们有这个页面：

<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

我认为load event将是您问题的一个更合适的答案。它可以被附加到ellement，并在加载所有内容（包括图像和其他资源）时启动。

你可以在这里找到一些例子。

https://developer.mozilla.org/en-US/docs/Web/Events/loadhttps://www.w3schools.com/jsref/event_onload.asp

但如果你不关心资源，你可能会想看看这个。

https://developers.google.com/speed/docs/insights/rules

表示您希望在加载div#内容后发出警报。如果您将javascript放在div的结束标记之后，那么它将在加载脚本之前的所有html之后运行。

<div id="content">
    // your content
</div>
<script type="text/javascript">
    alert("finished loading until this point");
</script>
相关文章：