DOMContentLoaded和load的区别

为什么80%的码农都做不了架构师？>>>   

这两个事件的区别是触发时机不一样，先触发DOMContentloaded，再触发load事件。

dom文件加载的步骤为：

• 1,解析HTML结构。
• 2,DOM树构建完成。//DOMContentLoaded
• 3,加载外部脚本和样式表文件。
• 4,解析并执行脚本代码。
• 5,加载图片等外部文件。
• 6,页面加载完毕。//load

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

// 原生js监听
document.addEventListener("DOMContentLoaded", function() {
   // ...代码...
}, false);

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

// jquery监听

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

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

转载于:https://my.oschina.net/cc4zj/blog/3008495