logo标签列表

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

javascript
4

我正在加载一个有成千上万个元素的网页。 如何测试节点是否已经完全加载，包括本身和所有子元素，但我不想等到整个页面加载完毕。 例如，让我们来看看这个页面：

<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

1
我能想到的唯一解决方法是使用类似这样的检查 div.nextSibling != null || documentIsReady，并使用 MutationObserver 观察 DOM 的变化，如果不支持则使用 setInterval。 - t.niese
谢谢，这是正确的答案。 - czv
类似（但不完全相同）的问题 https://dev59.com/wW855IYBdhLWcg3w-JQr 和答案https://dev59.com/wW855IYBdhLWcg3w-JQr#41176554。 - LuckyLuke Skywalker
使用MutationObserver来检查下一个兄弟元素何时加载完成。当下一个兄弟元素加载完成时，前面的元素及其子元素已经隐式加载完成。 - Damien
2个回答
1
0
假设你想在div#content加载完成后弹出提示。如果你将JavaScript放在div的关闭标签之后，它将在加载脚本之前运行所有 HTML。
<div id="content">
    // your content
</div>
<script type="text/javascript">
    alert("finished loading until this point");
</script>
谢谢您的回答，但问题在于我没有页面控制权，基本上是在外部页面加载时将我的JavaScript代码注入其中。 - czv
请问您能否解释一下您是如何注入代码的，我没有从原始问题中理解。也许我们可以更正确地提供帮助。 - Emre Türkiş
@t.niese 在问题的评论中回答了。 - czv
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接