document的load 和ready有什么区别？

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

1. $(document).ready() 或 DOMContentLoaded:

   • 触发时间：当 HTML 文档被完全加载和解析完成后，不等待样式表、图像和子框架的完成加载就会触发。换句话说，当 DOM 树构建完成，并且没有脚本阻止其执行时，就会触发此事件。
   • 用途：通常用于执行那些需要等待 DOM 完全就绪但不需要等待所有外部资源（如图片、CSS）加载完成的 JavaScript 代码。例如，设置事件监听器、初始化插件或执行与 DOM 相关的操作。
   • jQuery 中的表示：在 jQuery 中，这个事件可以通过 $(document).ready(function() { /* code */ }); 或简写为 $(function() { /* code */ }); 来使用。
   • 原生 JavaScript 中的表示：可以通过监听 DOMContentLoaded 事件来使用，如 document.addEventListener('DOMContentLoaded', function() { /* code */ });。

2. window.onload 或 load:

   • 触发时间：当整个页面及所有依赖资源如样式表和图片完成加载后触发。这意味着在触发此事件之前，页面上的所有内容（包括图像、脚本文件、CSS 文件等）都必须已经完全加载到浏览器中。
   • 用途：通常用于执行那些需要等待页面及其所有资源完全加载完成的 JavaScript 代码。例如，调整图像大小、执行依赖于图像或其他外部资源的操作。
   • jQuery 中的表示：虽然 jQuery 本身没有直接提供 window.onload 的封装，但你可以通过 $(window).on('load', function() { /* code */ }); 来使用它。
   • 原生 JavaScript 中的表示：可以直接使用 window.onload = function() { /* code */ }; 或通过监听 load 事件来使用，如 window.addEventListener('load', function() { /* code */ });。

总结：

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