前言：
在前端开发中，理解页面加载的不同阶段是至关重要的。特别是当我们需要在页面加载到特定阶段时执行某些操作时，我们需要知道应该使用
document ready还是document load事件。这两个事件在页面加载过程中发生的时间点不同，它们提供了在不同时间点运行代码的能力。本文将深入探讨document ready和document load的区别，以及如何在实际开发中正确使用它们。
Document Ready
- 触发时机: 当HTML文档被完全加载和解析完成之后，不等待样式表、图像和子框架的加载完成。
- 常用于: 初始化页面元素和绑定事件处理器。在这个阶段，DOM已经构建完成，可以安全地操作DOM元素。
- 如何使用:
- jQuery:
$(document).ready(function() { /* 代码 */ }); - 原生JavaScript:
document.addEventListener('DOMContentLoaded', function() { /* 代码 */ });
- 用法：
document ready事件在 DOM（文档对象模型）完全加载和解析完成后触发，但在所有外部资源（如图片和样式表）加载完成之前触发。这意味着你可以在这个时间点安全地操作 DOM，但如果你需要计算或操作依赖于外部资源的元素的尺寸或位置，你可能需要等到所有资源都加载完成。
在 jQuery 中，document ready 事件可以这样使用：
$(document).ready(function() { // 你的代码 });
或者更简洁的写法：
$(function() { // 你的代码 });
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document Ready Example</title> <style> img { width: 100%; height: auto; } </style> </head> <body> <h1>Hello, World!</h1> <img src="large-image.jpg" alt="Large Image"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function() { alert('DOM is ready!'); const imgHeight = $('img').height(); console.log('Image height on document ready:', imgHeight); // 可能为 0 }); </script> </body> </html>
当 DOM 准备好时，会弹出一个警告框，并在控制台打印出图片的高度。由于这个时候图片可能还没有完全加载，所以打印出的图片高度可能为 0。
Document Load
- 触发时机: 当整个页面及所有依赖资源如样式表和图片都已完成加载时。
- 常用于: 执行需要在整个页面完全加载后才能进行的操作，如图片尺寸的计算或者最终的初始化。
- 如何使用: 通过监听
window对象的load事件来实现。
在 jQuery 中，document load 事件可以这样使用：
$(window).on('load', function() { // 你的代码 });
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document Load Example</title> <style> img { width: 100%; height: auto; } </style> </head> <body> <h1>Hello, World!</h1> <img src="large-image.jpg" alt="Large Image"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(window).on('load', function() { alert('Page is fully loaded!'); const imgHeight = $('img').height(); console.log('Image height on document load:', imgHeight); // 应该是正确的高度 }); </script> </body> </html>
当整个页面及所有依赖的资源完全加载完成时，会弹出一个警告框，并在控制台打印出图片的高度。这个时候，图片已经完全加载，所以打印出的高度应该是正确的。
三、理解和总结
document ready 和 document load 事件提供了在页面加载的不同阶段运行代码的能力。document ready 更适合用于操作 DOM 元素，而 document load 更适合用于执行依赖于外部资源的操作。
在实际开发中，选择使用 document ready 还是 document load 取决于你的具体需求。如果你的操作不依赖于外部资源，或者你希望尽快执行代码以提升用户体验，你应该使用 document ready。如果你的操作依赖于外部资源，你应该使用 document load 以确保所有资源都加载完成。
理解这两个事件的区别和适用场景，可以帮助你编写更高效、更可靠的代码，并提升最终用户的体验。
区别
- 时间点:
Document Ready发生得更早，当DOM准备好就会触发，而不必等待其他资源加载完成。Document Load要等到所有资源都加载完成后才会触发。 - 用途:
Document Ready更适合用来初始化DOM元素和设置事件处理器，而Document Load更适合处理依赖于外部资源的任务。
