Javascript：在document.onload之前访问DOM

Question

我有一个document.body.onload=function(){...}页面，但由于该文档还包含外部<img>标记等，因此会出现延迟; onload似乎只是在这些外部网站发出某种响应之后才被解雇。

我将代码放在onload中，因为我认为DOM树在此之前并不完全可用（例如，如果过早调用，则document.getElementById（x）可能会返回null。）

是否有一个事件会在DOM中的所有内容都可访问之后触发，但在所有内容都被加载之前触发？

Answer 1

您可以将<script>标记放在正文的末尾，因为html是按顺序解析的。

此外，您还可以查看jquery的document.ready。即使您不想使用jquery，也可以查看它们如何处理它。 ready完全符合您的要求。

Answer 2

当然可以：

也许你有两个选择：

1） 通过使用jQuery： 使用$(document).ready()，您可以在窗口加载之前将事件加载或触发或者您希望它们执行任何操作。

2） DOMContentLoaded 参考：https://developer.mozilla.org/en/DOM/DOM_event_reference/DOMContentLoaded

function checkDom(yourFunc)
{
     window.addEventListener('DOMContentLoaded', yourFunc);
}

Answer 3

您应该考虑是否确实需要加载整个文档。只要您的库已经加载并且您感兴趣的DOM节点在页面上，您就可以立即采取行动。这种代码使得页面“活跃起来”比等待加载每个最后一个资源的页面快得多：

<form name="foo">
    <!-- ... -->
</form>
<script>
    var form = new My.FormWidget(document.forms.foo);
</script>

这有一个额外的好处，就是强迫你将逻辑封装在FormWidget中（你应该保持一个尽可能简短的“内联”脚本）。