Question

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

<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>

这将在控制台上打印出类似的内容：

Answer 1

说你想在加载div＃内容后发出警报。如果你把你的javascript放在div的结束标记之后，它会在加载脚本之前的所有html之后运行。

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

Answer 2

我认为load event将是您问题的更恰当答案。加载完所有内容（包括图像和其他资源）后，它可能会陷入困境并触发。

一些示例，您可以在这里找到。

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

但是，如果您不关心资源，那么您可能会想要看看它。

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

如何检查DOM元素是否已满载？

2 个答案: