document.onload（）奇怪的行为，有几个问题吗？

Question

Before you start reading, don't vote me down, its not just another question about window.onload vs document.onload . 在开始阅读之前，请不要拒绝我，这不仅仅是关于window.onload与document.onload另一个问题。

window.onload should trigger once all DOM nodes are fully loaded. 所有DOM节点完全加载后， window.onload应该触发。 document.onload should trigger once all DOM nodes are ready, it won't wait for all the assets to fully load. 一旦所有DOM节点准备就绪， document.onload应该触发，它不会等待所有资产完全加载。

Now if we have something like this with window.onload : 现在，如果我们在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>

The script will wait until image is fully loaded and then trigger alert. 该脚本将等待，直到图像完全加载，然后触发警报。

And if we have something like this with document.onload: 如果我们在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>

Nothing will happen and script won't load at all, unless we make our function self executing like this: 除非我们使函数像这样自我执行，否则什么也不会发生，脚本也根本不会加载：

<!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>

And now the script will work but won't wait for image to fully load like it does with window.onload . 现在脚本可以工作了，但是不会像window.onload一样等待图像完全加载。

Now I have 2 questions really: 现在我真的有两个问题：

Why do we need to create self executing functions with document.onload, and window.onload works without making our function self executing? 为什么我们需要使用document.onload创建自我执行功能，而window.onload可以在不使我们的功能自我执行的情况下工作？ It works the same in latest versions of Chrome and Firefox so I guess its how it its suppose to work, but why? 它在最新版本的Chrome和Firefox中的工作原理相同，所以我猜它应该如何工作，但是为什么呢？
What is really happening there with that code once we assign document.onload a function? 一旦分配了document.onload函数，该代码真正发生了什么？ I understand that its a way to wait for DOM to load. 我知道这是等待DOM加载的一种方式。 But we are saying that window.onload = function() { } Should this make a window a function? 但是我们说的是window.onload = function() { }这是否应该使窗口成为函数？ Or is that window has eventListener attach to it, that is triggered by onload trigger? 还是该窗口具有附加到onListener触发的eventListener？ Looks like answered this question myself... :) Is it true? 好像自己回答了这个问题... :)是真的吗？

Thanks! 谢谢！

Answer 1

document.onload should trigger once all DOM nodes are ready, it won't wait for all the assets to fully load. 一旦所有DOM节点准备就绪，document.onload应该触发，它不会等待所有资产完全加载。

You are operating under a misapprehension. 您在误解之下进行操作。 That is not the case. 事实并非如此。

Why do we need to create self executing functions with document.onload 为什么我们需要使用document.onload创建自我执行功能

Because there is no such thing as document.onload . 因为没有document.onload这样的东西。 It is an arbitrary property name with no special meaning. 它是任意属性名称，没有特殊含义。

If you assign a function to it, nothing will happen other than that its value will be the function. 如果为它分配一个功能，则除了将其值设为该功能之外，什么都不会发生。

If you immediately invoke the function and assign the return value, then the function will be invoked (immediately, before the DOM is ready) and nothing special will happen to the value you store on the property. 如果立即调用该函数并分配返回值，则将调用该函数（立即在DOM准备就绪之前），并且存储在属性上的值不会发生任何特殊情况。

If you want to run a function when the DOM is ready then use the DOMContentLoaded event : 如果要在DOM准备就绪时运行函数，请使用DOMContentLoaded事件：

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
});

document.onload（）奇怪的行为，有几个问题吗？

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-02-04 23:35:24

document.onload（）奇怪的行为，有几个问题吗？

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-02-04 23:35:24

解决方案1
1 已采纳 2016-02-04 23:35:24