DOMContentLoaded事件

介绍

DOMContentLoaded事件在HTML文档完全加载并解析后触发，不等样式表、图片、子帧（subframes）完成加载。

document.addEventListener('DOMContentLoaded', function () {
    console.log('DOM完全加载并解析了');
})

DOMContentLoaded属于HTML5规范，IE9不支持这个事件。

同步JavaScript代码会阻塞DOM解析，自然会影响DOMContentLoaded的触发时机。

document.addEventListener('DOMContentLoaded', function () {
    console.log('DOM完全加载并解析了');
})

for (var i = 100000000; i >= 0; i--) {
    // 这个同步脚本会延迟DOM解析时间，
    // 因此DOMContentLoaded事件会在稍晚些触发
}

一个广为流传的错误——使用load事件

有一个广为流传的错误是使用load事件表示在页面加载完成后执行某个函数，像这样：

window.onload =  function () {
    console.log('网页完全加载了');
}
// 或者
window.addEventListener('load', function () {
    console.log('网页完全加载了');
});

除非真是有这样的需求——等待页面的样式表、图片、子帧（subframes）都加载完毕，否则没必要使用load事件，相反使用DOMContentLoaded更合适些。

参考链接：DOMContentLoaded - Event reference MDN

（完）