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

Question

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

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

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

• 在加载文档时会触发， AND 所有其他资源（同样最重要的是图片）都会被加载。

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

Answer 5

获取jQuery并使用以下代码。

$(document).ready(function(){
    // Do stuff
});

Answer 6

您可能知道在DOM完全加载之前不应运行init函数。

你必须在DOM准备好后立即运行init函数的原因是，一旦页面加载，用户就开始按下按钮等。你必须尽量减少页面加载的小的不可避免的间隙和初始化功能还没有运行。如果这个差距太大（即时间太长），您的用户可能会遇到不合适的行为......（即您的上传不起作用）。

其他用户提供了如何调用init函数的精细示例，所以我在此不再重复...;）

Answer 7

您还可以像这样将移到页面底部：

</body>
<script>
// code
</script>
</html>

Answer 8

var Tette = 
{
    init: function()
    {
/* Your HTML code */
    }
};
Core.start(Tette);

您可以尝试在此代码中，在脚本的最后一行注册“Core.start(your object)”。这是在 DOM 加载后安全加载函数的一种方式。