窗口加载事件

1. window.onload

window.onload是窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载完成会触发该事件，调用该事件对应的事件处理函数。

JavaScript代码是从上往下依次执行的，如果要在页面加载完成后执行某些代码，又想要把这些代码写到页面任意的地方，可以把代码写到window.onload事件处理函数中。因为onload事件是等页面内容全部加载完毕再去执行处理函数的。

onload页面加载事件有两种注册方式，分别如下。

// 方式1

window.onload = function () {};

// 方式2

window.addEventListener('load', function () {});

需要注意的是，window.onload注册事件的方式只能写一次，如果有多个，会以最后一个window.onload为准。如果使用addEventListener则没有限制。

2. document.DOMContentLoaded

document.DOMContentLoaded加载事件会在DOM加载完成时触发，这里所说的加载不包括CSS样式表、图片和flash动画等额外内容的加载，因此，该事件的优点在于执行的时机更快，适用于页面中图片很多的情况。当页面图片很多时，从用户访问到onload事件触发可能需要较长的时间，交互效果就不能实现，这样会影响到用户的体验效果，在这时使用document.DOMContentLoaded事件更为合适，只要DOM元素加载完即可执行。需要注意的是，该事件有兼容性问题，IE 9以上才支持。