JS window.onload 用法与文档

Question

window.onload 从我的阅读中听起来可以与 document.onload 松散地互换，但我的经验表明这是不正确的。我继承了一个 JS 脚本，但我不确定如何更正它。我希望 JS 在 DOM 加载后执行，而不是在加载所有资源后执行。我该怎么做？

目前我有：

window.onload = initDropMenu;

我试过：

 document.onload = initDropMenu;

这只会导致菜单无法加载。我还尝试从 JS 中完全删除该行，然后让 DOM 通过以下方式执行它：

<body onload="initDropMenu()">

这也导致没有菜单，并且控制台中没有错误。我的 JS 知识有限，我在这里缺少什么？

Answer 1

在 window 上加载事件：

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
[source: developer.mozilla.org]

    <script>
       window.onload = function(){ init(); };
    </script>

在 HTML 元素上加载事件：

The load event is fired when a resource and its dependent resources have finished loading.
[source: developer.mozilla.org]

    <!-- When the image is loaded completely -->
    <img onload="image_loaded()" src="w3javascript.gif">

    <!-- When the frame is loaded completely (including all resources) -->
    <iframe onload="frame_loaded()" src="about.html">

    <!-- When body loaded completely (including all resources, images and iframes) -->
    <body onload="init()">

许多论坛甚至本站的一些答案可能会误导您，但是 body 元素上的 load 事件 不仅等同于 load 事件在 window 上，它是 完全相同的事件 。以下引用说明了这一点。

For historical reasons, some attributes/properties on the <body> and <frameset> elements actually set event handlers on their parent Window object. (The HTML specification names these: onblur, onerror, onfocus, onload, onscroll.)
[source: developer.mozilla.org]

DOMContentLoaded 事件：

开发人员应该使用的是文档上的 DOMContentLoaded 事件。它在 html 加载并完全解析时触发。

    document.addEventListener("DOMContentLoaded", function(event) {
        alert("Document is ready");
    });

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event load should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.
[source: developer.mozilla.org]

也许这是关于该主题的唯一具有适当参考文献的答案

JS window.onload 用法与文档

JS window.onload Usage Vs Document

javascript

dom

document-ready