当DOM"准备好"时运行JavaScript函数？

Question

我正在使用一个JavaScript上传脚本,该脚本表示在DOM准备就绪后立即运行初始化函数.我现在可以使用函数调用body.onload或者在定义函数后直接使用它.该函数在占位符div中构建一些HTML,作为文件上载器工具.

我的问题是这里的最佳做法是什么？既然它现在有效,那么为什么指令会在DOM准备好后立即运行init函数？我应该在占位符DIV之后直接添加<script>标记吗？

Answer 1

<script>
    window.addEventListener("DOMContentLoaded", function() {
        // do stuff
    }, false);
</script>

你这样做,所以你知道所有解析的元素在DOM等可用.

Answer 2

在onLoad运行之前,DOM通常已准备就绪.onLoad仅在所有内容加载后运行 - 外部脚本,图像,样式表等.

但DOM,即HTML结构在此之前已经准备就绪.如果您运行页面底部的代码(或脚本使用的页面部分之后),它也可以正常工作.

Answer 3

最简单的解决方案是使用jQuery及其$(document).ready(function() { .... });功能.而不是....你自己的代码.

请注意,它基本上与@ Shadow2531建议相同,但也适用于不支持该事件的旧浏览器.

Answer 4

2015年,您有两种现代浏览器选择:

document.onload

• 加载文档时会触发此文件,但其他资源(最明显的是图像)未必完成加载.

在window.onload

• 这将触发文件加载时,和所有其他资源(再次,最显着的图像)被加载.

当然,上述两个事件都可以更好地与window.addEventListener()一起使用,因为允许多个侦听器.