JS | Document的Load事件 和Ready事件有什么区别？

目录

一、$(document).ready() 或 DOMContentLoaded

二、window.onload 或 load

---

在前端开发中，document 的 load 和 ready 事件是两个常用的事件，但它们之间有一些关键的区别。这两个事件都与页面加载的状态有关，但触发的时间和所代表的含义不同。

一、$(document).ready() 或 DOMContentLoaded

1、触发时间：当 HTML 文档被完全加载和解析完成后，不等待样式表、图像和子框架的完成加载就会触发。换句话说，当 DOM 树构建完成，并且没有脚本阻止其执行时，就会触发此事件。

2、用途：通常用于执行那些需要等待 DOM 完全就绪但不需要等待所有外部资源（如图片、CSS）加载完成的 JavaScript 代码。例如，设置事件监听器、初始化插件或执行与 DOM 相关的操作。

3、jQuery 中的表示：在 jQuery 中，这个事件可以通过 

$(document).ready(function() { /* code */ }); 

或简写为 

$(function() { /* code */ }); 

来使用它。

4、原生 JavaScript 中的表示：可以通过监听 DOMContentLoaded 事件来使用，如

document.addEventListener('DOMContentLoaded', function() { /* code */ });

二、window.onload 或 load

1、触发时间：当整个页面及所有依赖资源如样式表和图片完成加载后触发。这意味着在触发此事件之前，页面上的所有内容（包括图像、脚本文件、CSS 文件等）都必须已经完全加载到浏览器中。

2、用途：通常用于执行那些需要等待页面及其所有资源完全加载完成的 JavaScript 代码。例如，调整图像大小、执行依赖于图像或其他外部资源的操作。

3、jQuery 中的表示：虽然 jQuery 本身没有直接提供 window.onload 的封装，但你可以通过 

$(window).on('load', function() { /* code */ }); 

来使用它。

4、原生 JavaScript 中的表示：可以直接使用 

window.onload = function() { /* code */ }; 

或通过监听 load 事件来使用，如 

window.addEventListener('load', function() { /* code */ });

总结：

• $(document).ready() 或 DOMContentLoaded 触发较早，当 DOM 解析完成即可触发，不等待其他资源加载。
• window.onload 或 load 触发较晚，必须等待页面上的所有内容（包括图片、CSS、脚本等）都加载完成后才会触发。

---

▼参考资料▼

深入理解 Document Load 和 Document Ready 的区别

document的load 和ready区别 | document load 和 ready区别