Question

在您开始阅读之前，请不要投票给我，这不仅仅是关于window.onload与document.onload的其他问题。

一旦所有DOM节点完全加载，

window.onload就会触发。一旦所有DOM节点都准备好就会触发document.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>

脚本将等待图像完全加载，然后触发警报。

如果我们在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触发器触发的？看起来像我自己回答了这个问题...... :)是真的吗？

谢谢！

Answer 1

document.onload应该在所有DOM节点准备就绪后触发，它不会等待所有资产完全加载。

你是在误解的情况下操作的。事实并非如此。

为什么我们需要使用document.onload
创建自执行函数

因为没有document.onload这样的东西。它是一个没有特殊含义的任意属性名称。

如果你为它分配一个函数，除了它的值将是函数之外什么都不会发生。

如果你立即调用该函数并分配返回值，那么将调用该函数（在DOM准备好之前立即执行），并且您在该属性上存储的值不会发生任何特殊情况。

如果要在DOM准备就绪时运行函数，请使用DOMContentLoaded event：

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

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

1 个答案: