load和DOMContentLoaded区别

首先说一下DOM文档加载的流程：

1.解析HTML结构；
2.加载外部脚本文件；
3.解析并执行脚本代码；
4.DOMs树构建完成；
5.加载样式表和图片等外部文件；
6.页面加载完成。

从上面的文档加载的6步中，第4步结束后触发DOMContentLoaded事件，而当最后一步结束后才触发load事件，可以看出DOMContentLoaded是在load之前触发。

load的实现

原生

window.onload = function(){}

jquery

$(document).load(function(){});

DOMContentLoaded的实现

原生

document.addEventListener("DOMContentLoaded", function() {
   // ...代码...
}, false);

jquery

$(document).ready(function(){
//do something
})
//简写
$(function(){
// do something
});