当 DOM“准备好”时运行 JavaScript 函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7992342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Run JavaScript function when the DOM is "ready"?
提问by miahelf
I'm using a JavaScript upload script that says to run the initialize function as soon as the DOM is ready. I currently have it working just fine with either a call to the function with body.onloador directly after the function is defined. The function builds some HTML in a placeholder div that acts as the file uploader tool.
我正在使用一个 JavaScript 上传脚本，它说一旦 DOM 准备好就运行初始化函数。我目前让它在body.onload定义函数后调用函数或直接调用函数都可以正常工作。该函数在用作文件上传工具的占位符 div 中构建一些 HTML。
My question is what is the best practice here? Since it works for now, why would the instructions say to run the init function as soon as the DOM is ready? Should I be adding a <script> tag directly after the placeholder DIV for example?
我的问题是这里的最佳实践是什么？既然它现在有效，为什么指令会说一旦 DOM 准备好就运行 init 函数？例如，我应该在占位符 DIV 之后直接添加一个 <script> 标签吗？
采纳答案by ThiefMaster
The easiest solution is using jQuery and its $(document).ready(function() { .... });function. Instead of ....you put your own code.
最简单的解决方案是使用 jQuery 及其$(document).ready(function() { .... });功能。而不是....你把你自己的代码。
Note that it basically does the same thing @Shadow2531 suggested, but also works in old browsers not supporting that event.
请注意，它基本上与@Shadow2531 建议的相同，但也适用于不支持该事件的旧浏览器。
回答by Shadow2531
<script>
window.addEventListener("DOMContentLoaded", function() {
// do stuff
}, false);
</script>
You do that so you know all the parsed elements are available in the DOM etc.
你这样做是为了知道所有解析的元素都在 DOM 等中可用。
回答by Ariel
The DOM is usually ready before onLoad runs. onLoad only runs after everything loads - external scripts, images, stylesheets, etc.
DOM 通常在 onLoad 运行之前就准备好了。onLoad 仅在所有内容加载后运行 - 外部脚本、图像、样式表等。
But the DOM, i.e. the HTML structure is ready before that. If you run the code at the bottom of the page (or after the parts of the page the script works with) that will work fine as well.
但是 DOM，即 HTML 结构在此之前已经准备就绪。如果您在页面底部（或在脚本使用的页面部分之后）运行代码，它也可以正常工作。
回答by Robert D
In 2015 you have two options with modern browsers:
2015 年，现代浏览器有两种选择：
document.onload
文件加载
- this fires when the document is loaded, but other resources (most notably images) have not necessarily finished loading.
- 这在文档加载时触发，但其他资源（最显着的图像）不一定完成加载。
window.onload
窗口加载
- this fires when the document is loaded, ANDall other resources (again, most notably images) are loaded.
- 当文档加载后，这个火灾，和所有其他资源（再次，最显着的图像）被加载。
Both of the above events would be better utilized with window.addEventListener() of course, as multiple listeners would be allowed.
当然，由于允许多个侦听器，因此可以更好地利用 window.addEventListener() 来更好地利用上述两个事件。
回答by Alex
As you probably know you should not run init functions before the DOM is fully loaded.
您可能知道在 DOM 完全加载之前不应该运行 init 函数。
The reason you must run the init function as soon as the DOM is ready, is that once the page has loaded the user starts hitting buttons etc. You have to minimize the small inavoidable gap where the page is loaded and the init-functions haven't run yet. If this gap gets too big (ie. too long time) your user might experience inappropiate behaviour... (ie. your upload will not work).
您必须在 DOM 准备好后立即运行 init 函数的原因是，一旦页面加载完毕，用户就会开始点击按钮等。您必须最小化页面加载和 init 函数尚未加载的不可避免的小间隙。还没跑。如果这个差距太大（即时间太长），您的用户可能会遇到不适当的行为......（即您的上传将不起作用）。
Other users have provided fine examples of how to call the init function, so I will not repeat it here... ;)
其他用户已经提供了如何调用 init 函数的很好的例子，所以我不会在这里重复......;)
回答by Alex
回答by agiopnl
You could also just move the to the bottom of your page like this:
您也可以像这样将 移动到页面底部：
</body>
<script>
// code
</script>
</html>
