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

【问题标题】：Run JavaScript function when the DOM is "ready"?当 DOM “准备好”时运行 JavaScript 函数？
【发布时间】：2011-12-20 23:55:52
【问题描述】：

我正在使用一个 JavaScript 上传脚本，它说一旦 DOM 准备好就运行初始化函数。我目前使用body.onload 调用函数或在定义函数后直接调用它都可以正常工作。该函数在作为文件上传工具的占位符 div 中构建一些 HTML。

我的问题是这里的最佳做法是什么？既然它现在可以工作，为什么说明会说在 DOM 准备好后立即运行 init 函数？例如，我应该在占位符 DIV 之后直接添加

【问题讨论】：

【解决方案1】：

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

这样做是为了知道所有已解析的元素在 DOM 等中都可用。

【讨论】：

【解决方案2】：

DOM 通常在 onLoad 运行之前就准备好了。 onLoad 仅在所有内容加载后运行 - 外部脚本、图像、样式表等。

但是 DOM，即 HTML 结构在此之前已经准备好了。如果您在页面底部（或脚本使用的页面部分之后）运行代码，也可以正常工作。

【讨论】：

【解决方案3】：

最简单的解决方案是使用 jQuery 及其$(document).ready(function() { .... }); 函数。而不是....，你输入你自己的代码。

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

【讨论】：

公平地说：@ThiefMaster 建议“最简单的解决方案”，这可以说是正确的。但最佳实践并非如此。
如果 jQuery 已经在页面上使用或者很容易使用并且不会过度使用，这是“最简单的解决方案”。如@Shadow2531 的answer below 中给出的那样，一个非常好的答案是结合如何使用jQuery 和如何使用标准浏览器代码来实现。

【解决方案4】：

在 2015 年，现代浏览器有两种选择：

document.onload

window.onload

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

【讨论】：

【解决方案5】：

您也可以像这样将<script> 移动到页面底部：

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

【讨论】：

【解决方案6】：

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

您必须在 DOM 准备好后立即运行 init 函数的原因是，一旦页面加载完毕，用户就会开始点击按钮等。您必须尽量减少页面加载和 init-功能尚未运行。如果这个差距变得太大（即时间过长），您的用户可能会遇到不恰当的行为......（即您的上传将无法正常工作）。

其他用户已经提供了如何调用init函数的很好的例子，这里不再赘述... ;)

【讨论】：

【解决方案7】：

获取jQuery 并使用以下代码。

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

【讨论】：

【解决方案8】：

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

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

【讨论】：