DOMContentLoaded、ready、load 事件的区别

 

事件 DOMContentLoaded、ready 和 load 之间的区别：

触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。

     DOM文档加载的步骤为：

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

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

  （当构建DOM树时，若遇到<script>标签，则会立刻停止DOM树的构建）

原生js 实现：

document.addEventListener("DOMContentLoaded", function() {  

   // ...代码...  

}, false);  

window.addEventListener("load", function() {  

    // ...代码...  

}, false);  

 jQuery实现：

// DOMContentLoaded  

$(document).ready(function() {