window.onload 与 document.onload

哪个更广受支持： window.onload或document.onload ？

答案

他们什么时候开火？

window.onload

默认情况下，会在加载整个页面（包括其内容（图像，CSS，脚本等））时触发。

在某些浏览器中，它现在承担了document.onload的角色，并在 DOM 准备就绪时触发。

document.onload

在 DOM 准备就绪时调用该方法，该方法可以在加载图像和其他外部内容之前进行。

他们的支持程度如何？

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 ）。
根据计数器的状态进行计数和执行操作可以模拟两种事件行为。
或者，在 HTML- <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`

1 个香草 JavaScript

window.addEventListener('load', function() {
    console.log('All assets are loaded')
})

2 个 jQuery

$(window).on('load', function() {
    console.log('All assets are loaded')
})

祝你好运。