在某些浏览器中,它现在承担了document.onload
的角色,并在 DOM 准备就绪时触发。
document.onload
window.onload
似乎得到了最广泛的支持。实际上,某些现代浏览器在某种意义上已经用window.onload
document.onload
。
浏览器支持问题很可能是许多人开始使用jQuery 之类的库来处理对文档准备就绪的检查的原因,如下所示:
$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });
为了历史的目的。 window.onload
与body.onload
:
不久前在 codingforums 上提出了一个类似的问题,
window.onload
的使用,而不是body.onload
的使用。结果似乎是您应该使用window.onload
因为将结构与操作分开是很好的。
一般的想法是,当文档的窗口准备好呈现时,window.onload 会触发;而DOM 树(由文档中的标记代码构建)完成时,会触发document.onload。
理想情况下,订阅DOM 树事件,可以通过 Javascript 进行屏幕外操作,几乎不占用 CPU 负载。相反,当尚未请求,解析和加载多个外部资源时window.onload
可能需要一段时间才能启动。
►测试场景:
要观察差异以及您选择的浏览器如何实现上述事件处理程序,只需将以下代码插入文档的 - <body>
- 标记中。
<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){
console.log("document.onload", e, Date.now() ,window.tdiff,
(window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) );
}
window.onload = function(e){
console.log("window.onload", e, Date.now() ,window.tdiff,
(window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) );
}
</script>
►结果:
这是由此产生的行为,对于 Chrome v20(可能是大多数当前的浏览器)而言,是可观察到的。
document.onload
事件。<body>
内声明时, onload
触发两次,在<head>
内声明时,onfire 触发(事件随后充当document.onload
)。<head>
元素window.onload
►示例项目:
上面的代码来自该项目的代码库( index.html
和keyboarder.js
)。
有关window 对象的事件处理程序的列表,请参考 MDN 文档。
添加事件监听器
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
// - Code to execute when all DOM content is loaded.
// - including fonts, images, etc.
});
</script>
Update March 2017
window.addEventListener('load', function() {
console.log('All assets are loaded')
})
$(window).on('load', function() {
console.log('All assets are loaded')
})