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

深入理解 Document Load 和 Document Ready 的区别
🙂博主：锅盖哒
🙂文章核心：深入理解 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() { /* 代码 */ });
1. 用法： document ready 事件在 DOM（文档对象模型）完全加载和解析完成后触发，但在所有外部资源（如图片和样式表）加载完成之前触发。这意味着你可以在这个时间点安全地操作 DOM，但如果你需要计算或操作依赖于外部资源的元素的尺寸或位置，你可能需要等到所有资源都加载完成。
在 jQuery 中，document ready 事件可以这样使用：
```
$(document).ready(function() {
  // 你的代码
});
```
或者更简洁的写法：
```
$(function() {
  // 你的代码
});
```
1. 代码：
```
<!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() {
  // 你的代码
});
```
1. 代码：
```
<!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更适合处理依赖于外部资源的任务。
相关阅读:
JWT 令牌撤销：中心化控制与分布式Kafka处理
 解锁远程联机模式：使用MCSM面板搭建我的世界服务器，并实现内网穿透公网访问
 kubernettes之RBAC基于角色的访问控制
 Win11 Excel文件变成白板图标怎么解决？
遍历数组的10个高阶函数
 从0到1学习用lua编写neovim插件
 Hadoop学习笔记：运行wordcount对文件字符串进行统计案例
 ti代理商:好的ti代理商有哪些分销
 《web课程设计》基于HTML+CSS+JavaScript典的中医药大学网(11个页面)
编写根据现有代码生成流程图的IDEA插件的代码。
原文地址：https://blog.csdn.net/A12536365214/article/details/134068420

前言：

Document Ready

Document Load

三、理解和总结

区别