JS window.onload用法与文档 [英] JS window.onload Usage Vs Document
问题描述
window.onload 听起来像是可以与 document.onload 松散地互换，但我的经验表明这是不正确的。我继承了一个JS脚本，我不知道如何纠正它。我想要在DOM加载后执行JS，而不是在加载所有资源之后执行。我该怎么做？
window.onload from my reading sounds like it is loosely interchangeable with document.onload but my experience has shown this is incorrect. I've inherited a JS script and I'm not sure how to correct it. I want the JS to execute once the DOM has loaded, not once all resources have been loaded. How can I do this?
目前我有：
window.onload = initDropMenu;
我试过：
document.onload = initDropMenu;
这只会导致菜单无法加载。我也尝试从JS中完全删除该行，并让DOM通过以下方式执行：
which just results in the menu not loading. I've also tried removing the line altogether from the JS and just having the DOM execute it via:
<body onload="initDropMenu()">
这也导致没有菜单，并且控制台没有错误。我的JS知识有限，我在这里缺少什么？
that also resulted in no menu, and in no errors in the console. My JS knowledge is limited, what am I missing here?
推荐答案
在窗口加载事件：
加载事件在文档加载过程结束时触发。此时
，文档中的所有对象都在DOM中，所有
图像，脚本，链接和子框架已完成加载。
[来源： developer.mozilla .org ]
<script>
window.onload = function(){ init(); };
</script>
在HTML元素上加载事件：
当资源和依赖的
资源时会触发load事件已完成加载。
[来源： developer.mozilla.org ]
The
loadevent 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元素上的事件不仅仅等于 在窗口上加载事件，它是完全相同事件即可。以下引用说明了这一点。
Many forums even some answers in this site may mislead you, but the load event on body element is not only just equivalent to load event on window, it is the exact same event. The following quote clarifies it.
由于历史原因，
< body>上的一些属性/属性和
< frameset>元素实际上在其父窗口
对象上设置了事件处理程序。 （HTML规范将这些命名为：onblur，onerror，onfocus，
onload，onscroll。）
[来源： developer.mozilla.org ]
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加载并完全解析时触发。
What developers should use is DOMContentLoaded event on document. It fires when the html has loaded and parsed completely.
document.addEventListener("DOMContentLoaded", function(event) {
alert("Document is ready");
});
当初始HTML文档有$ b $时会触发DOMContentLoaded事件b已完全加载并解析，无需等待样式表，
图像和子帧完成加载。一个非常不同的事件加载
应该仅用于检测完全加载的页面。使用load是一个令人难以置信的
流行错误，其中DOMContentLoaded会更合适
，所以要小心。
[来源： developer.mozilla.org ]
也许这是关于这个主题的唯一答案，它有适当的参考资料
这篇关于JS window.onload用法与文档的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
