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

前言：

一、Document Ready

二、Document Load

三、理解和总结

前言：

在前端开发中，理解页面加载的不同阶段是至关重要的。特别是当我们需要在页面加载到特定阶段时执行某些操作时，我们需要知道应该使用 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更适合处理依赖于外部资源的任务。