window.load 和$(document).ready() 、DOMContentLoaded区别

<b>一、DOM文档加载的步骤为：</b>

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

<b>二、区别</b>

1. 执行时间不同

• window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

• $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

• 在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。
  //原生js写法
  document.addEventListener("DOMContentLoaded", function() {
  // ...代码...
  }, false);

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

2. 编写个数不同

• window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
• $(document).ready()可以同时编写多个，并且都可以得到执行

3 简化写法

• window.onload没有简化写法
• $(document).ready(function(){})可以简写成$(function(){});

4 jquery写法

//Jquery 代码如下： 
$(window).load(function (){ 
// 编写代码 
});等价于 JavaScript 中的以下代码 
Window.onload = function (){ 
// 编写代码 
}