用生命谱写代码的赞歌

0%

DOMContentLoaded 与 load 的区别

Posted on Edited on In
我们通常用 window.onload() 监听页面加载完成才开始执行 js 脚本，你是否想过它到底是在什么时候触发的，它与 DOMContentLoaded 有什么区别？

二者的区别是，触发的时机不一样， DOMContentLoaded 事件先触发， load 事件后触发。可以参考 jQuery 中 ready 与 load 事件。

DOM 文档解析步骤如下：

  1. 从上往下解析 HTML 结构
  2. 加载外部脚本和样式文件
  3. 解析并执行脚本代码
  4. DOM树构建完成 –> DOMContentLoaded
  5. 继续加载图片等外部文件
  6. 页面加载完毕 –> load

由此可知，在第4步，会触发 DOMContentLoaded 事件，在第6步，会触发 load 事件。

用原生 js 可以这么写：

1
2
3
4
5
6
7
8
document.addEventListener("DOMContentLoaded", function() {
   // ...代码...
}, false)

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

用 jQuery 这么写：

1
2
3
4
5
6
7
8
9
10
11
12
13
// DOMContentLoaded
$(document).ready(function() {
    // ...代码...
});
// document ready 简写
$(function() {
    // ...代码...
})

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