在开始阅读之前，请不要投票反对我，这不仅仅是关于 window.onload 与 document.onload 的另一个问题。
window.onload 应在所有 DOM 节点完全加载后触发。
document.onload 应在所有 DOM 节点准备就绪后触发，它不会等待所有资源完全加载。
现在，如果我们有这样的 window.onload:
<!DOCTYPE html>
<html>
<head>
<title>Testing out document.onload and window.onload</title>
<script>
window.onload = function() {
alert('Loaded!');
};
</script>
</head>
<body>
<img src="https://goo.gl/0Oomrw" alt="Heavy image!" />
</body>
</html>
脚本将等待图像完全加载，然后触发警报。
如果我们有这样的 document.onload:
<!DOCTYPE html>
<html>
<head>
<title>Testing out document.onload and window.onload</title>
<script>
document.onload = function() {
alert('Loaded!');
};
</script>
</head>
<body>
<img src="https://goo.gl/0Oomrw" alt="Heavy image!" />
</body>
</html>
什么都不会发生，脚本根本不会加载，除非我们让函数像这样自动执行:
<!DOCTYPE html>
<html>
<head>
<title>Testing out document.onload and window.onload</title>
<script>
document.onload = function() {
alert('Loaded!');
}();
</script>
</head>
<body>
<img src="https://goo.gl/0Oomrw" alt="Heavy image!" />
</body>
</html>
现在脚本可以工作，但不会像 window.onload 那样等待图像完全加载。
现在我真的有两个问题:
为什么我们需要使用 document.onload 创建自执行函数，而 window.onload 却可以在不让我们的函数自执行的情况下工作？它在最新版本的 Chrome 和 Firefox 中的工作方式相同，所以我猜它应该是如何工作的，但为什么呢？
当我们为 document.onload 分配一个函数后，该代码到底发生了什么？我知道这是一种等待 DOM 加载的方法。但我们说的是
window.onload = function() { }这应该使窗口成为函数吗？或者该窗口是否附加了 eventListener，由 onload 触发器触发？看起来我自己回答了这个问题...:)这是真的吗？
谢谢!
最佳答案
document.onload should trigger once all DOM nodes are ready, it won't wait for all the assets to fully load.
您的操作存在误解。事实并非如此。
Why do we need to create self executing functions with document.onload
因为没有document.onload这样的东西。它是一个任意的属性名称，没有特殊含义。
如果你给它分配一个函数，除了它的值将是该函数之外，不会发生任何事情。
如果您立即调用该函数并分配返回值，则该函数将被调用(在 DOM 准备好之前立即)，并且您存储在属性上的值不会发生任何特殊情况。
<小时/>如果您想在 DOM 准备就绪时运行函数，请使用 DOMContentLoaded event :
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
关于javascript - document.onload() 奇怪的行为，有几个问题吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35213729/