事件 DOMContentLoaded 和 load 的区别

他们的区别是，触发的时机不一样，先触发 DOMContentLoaded 事件，后触发 load 事件。

DOM 文档加载的步骤为

解析 HTML 结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
DOM 树构建完成。//DOMContentLoaded //jQuery.ready
加载图片等外部文件。
页面加载完毕。//load

在第 4 步，会触发 DOMContentLoaded 事件。在第 6 步，触发 load 事件。

用原生 js 可以这么写

// 不兼容老的浏览器，兼容写法见 [jQuery 中 ready 与 load 事件](http://www.imooc.com/code/3253)，或用 jQuery
document.addEventListener("DOMContentLoaded", function() {
   // ... 代码...
}, false);

1
2
3

window.addEventListener("load", function() {
    // ... 代码...
}, false);

用 jQuery 这么写

// DOMContentLoaded
$(document).ready(function() {
    // ... 代码...
});

//load  
$(document).load(function() {
    // ... 代码...
});
// 貌似 1.8 版本之后, load 就抛弃了. 只能用 window.onload() 或者 addEventListener 这两个事件监听页面加载完成

参考资料：