添加事件侦听器

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      /* 
        - Code to execute when only the HTML document is loaded.
        - This doesn't wait for stylesheets, 
          images, and subframes to finish loading. 
      */
  });
</script>

2017年3月更新

1香草JavaScript

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

2 jQuery

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

然而，Window.onload是标准的——PS3中的web浏览器（基于Netfront）不支持窗口对象，因此您不能在那里使用它。

然而，它们通常是相同的。类似地，body.onload在IE中变为window.onload。

根据解析HTML文档-结束，

浏览器解析HTML源代码并运行延迟脚本。当所有HTML都已解析并运行时，将在文档中发送DOMContentLoaded。事件将弹出窗口。浏览器加载延迟加载事件的资源（如图像）。在窗口处调度加载事件。

因此，执行顺序为

DOMContentLoaded捕获阶段窗口的事件侦听器DOMContentLoaded文档的事件侦听器DOMContentLoaded处于气泡阶段的窗口的事件侦听器加载窗口的事件侦听器（包括onload事件处理程序）

绝不应调用文档中的气泡加载事件侦听器（包括onload事件处理程序）。只能调用捕获加载侦听器，但这是由于子资源（如样式表）的加载，而不是由于文档本身的加载。

window.addEventListener（'DOMContentLoaded'，函数（）{console.log（'窗口-DOMContentLoaded-捕获'）；//第一}，true）；document.addEventListener（'DOMContentLoaded'，函数（）{console.log（'文档-DOMContentLoaded-捕获'）；//第二}，true）；document.addEventListener（'DOMContentLoaded'，函数（）{console.log（'文档-DOMContentLoaded-气泡'）；//第二});window.addEventListener（'DOMContentLoaded'，函数（）{console.log（'窗口-DOMContentLoaded-气泡'）；//第三});window.addEventListener（'load'，函数（）{console.log（'窗口-加载-捕获'）；//第四}，true）；document.addEventListener（'load'，函数（e）{/*筛选出与文档无关的加载事件*/if（[style'，'script'].indexOf（e.target.tagName.toLowerCase（））<0）console.log（'文档-加载-捕获'）；//不会发生}，true）；document.addEventListener（'load'，function（）{console.log（'文档-加载-气泡'）；//不会发生});window.addEventListener（'load'，函数（）{console.log（'窗口-加载-气泡'）；//第四});window.onload=函数（）{console.log（'窗口-加载'）；//第四};document.onload=函数（）{console.log（'文档-加载'）；//不会发生};

他们什么时候开火？

窗口.卸载

默认情况下，当加载整个页面时，包括其内容（图像、CSS、脚本等），它将被激发。

在某些浏览器中，它现在取代了document.onload的角色，并在DOM就绪时启动。

文档.卸载

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

他们的支持程度如何？

window.onload似乎是最受支持的。事实上，在某种意义上，一些最现代的浏览器已经用window.onload取代了document.onload。

浏览器支持问题很可能是许多人开始使用jQuery等库来处理文档就绪检查的原因，如下所示：

$(document).ready(function() { /* code here */ });
$(function() { /* code here */ });

为了历史的目的。window.onload与body.nload：

有一段时间，在编写论坛时也提出了类似的问题返回关于window.onload在body.onload上的用法结果似乎是您应该使用window.onload，因为它是很好地将你的结构与动作分开。

添加事件侦听器

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      /* 
        - Code to execute when only the HTML document is loaded.
        - This doesn't wait for stylesheets, 
          images, and subframes to finish loading. 
      */
  });
</script>

2017年3月更新

1香草JavaScript

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

2 jQuery

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