当前位置： 首页 > news >正文

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

news 2026/4/3 21:48:08

目录

前言：

一、Document Ready

二、Document Load

三、理解和总结

前言：

在前端开发中，理解页面加载的不同阶段是至关重要的。特别是当我们需要在页面加载到特定阶段时执行某些操作时，我们需要知道应该使用 document ready 还是 document load 事件。这两个事件在页面加载过程中发生的时间点不同，它们提供了在不同时间点运行代码的能力。本文将深入探讨 document ready 和 document load 的区别，以及如何在实际开发中正确使用它们。

一、Document Ready

  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

  1. 用法： document 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 Load 和 Document Ready 的区别

目录 前言&#xff1a; 一、Document Ready 二、Document Load 三、理解和总结 前言&#xff1a; 在前端开发中&#xff0c;理解页面加载的不同阶段是至关重要的。特别是当我们需要在页面加载到特定阶段时执行某些操作时&#xff0c;我们需要知道应该使用 document ready 还…...

编程日记 2023/10/27 9:21:26

有趣的算法（七） ——快速排序改进算法

有趣的算法&#xff08;七&#xff09; ——快速排序改进算法 目录 有趣的算法&#xff08;七&#xff09; ——快速排序改进算法 本文章向大家介绍有趣的算法&#xff08;七&#xff09; ——快速排序改进算法&#xff0c;主要内容包括其使用实例、应用技巧、基本知识点总结…...

编程日记 2023/10/27 9:20:25

Vue3 + Tsx 集成 ace-editor编辑器

Ace Editor介绍 Ace Editor&#xff08;全名&#xff1a;Ajax.org Cloud9 Editor&#xff09;是一个开源的代码编辑器&#xff0c;旨在提供强大的代码编辑功能&#xff0c;通常用于构建基于Web的代码编辑应用程序。它最初由Cloud9 IDE开发&#xff0c;现在由开源社区维护。 主…...

编程日记 2023/10/27 9:19:24

TypeScritpt中的namespace

namesapce 它是在ES模块诞生前&#xff0c;ts自己发明的模块功能&#xff0c;目前已经不推荐使用了&#xff0c;namespace意为命名空间&#xff0c;就是模块化的意思。 1. 基本用法 namespace用来建立一个容器&#xff0c;内部的所有变量和函数只能在容器内部才能使用。 nam…...

编程日记 2023/10/27 9:18:23

LeetCode75——Day17

文章目录 一、题目二、题解 一、题目 1493. Longest Subarray of 1’s After Deleting One Element Given a binary array nums, you should delete one element from it. Return the size of the longest non-empty subarray containing only 1’s in the resulting array.…...

编程日记 2023/10/27 9:17:22

Spring中Bean的作用域

目录 一、什么是Bean的作用域 二、Scope注解 三、Bean的6种作用域 3.1 singleton单例模式 3.2 prototype 原型模式 3.3 request 3.4 session 3.5 application 3.6 websocket 一、什么是Bean的作用域 在之前学习的过程中&#xff0c;我们把作用域定义为&#xff1a;限定程序中变…...

编程日记 2023/10/27 9:16:21

什么是命令行参数解析和选项处理？

在C语言中&#xff0c;命令行参数解析和选项处理是一项关键的编程技术&#xff0c;它使程序能够从命令行接受参数和选项&#xff0c;以在运行时进行不同的配置和控制。这对于命令行工具、应用程序和脚本编写非常重要&#xff0c;因为它允许用户以不同的方式自定义程序的行为。本…...

编程日记 2023/10/27 9:15:20

网络协议--TFTP：简单文件传送协议

15.1 引言 TFTP(Trivial File Transfer Protocol)即简单文件传送协议&#xff0c;最初打算用于引导无盘系统&#xff08;通常是工作站或X终端&#xff09;。和将在第27章介绍的使用TCP的文件传送协议&#xff08;FTP&#xff09;不同&#xff0c;为了保持简单和短小&#xff0…...

编程日记 2023/10/27 9:14:19

MongoDB 的集群架构与设计

一、前言 MongoDB 有三种集群架构模式&#xff0c;分别为主从复制&#xff08;Master-Slaver&#xff09;、副本集&#xff08;Replica Set&#xff09;和分片&#xff08;Sharding&#xff09;模式。 Master-Slaver 是一种主从复制的模式&#xff0c;目前已经不推荐使用。Re…...

编程日记 2023/10/27 9:13:17

volatile 系列之实现原理

我们通过volatile解决了由于编译器的指令重排序导致的可见性问题&#xff0c;这意味着volatile 底层用到了内存屏障&#xff0c;下面我们从它的部分源码中找一下内存屏障相关的痕迹。 通过javap-V VolatileExample.class打印VolatileExample类的字节指令如下。 public static …...

编程日记 2023/10/27 9:12:16

【黑马程序员】mysql进阶篇笔记

2023年10月26日17:50:43 58.01. 进阶-课程介绍(Av765670802,P58) 59.02. 进阶-存储引擎-MySQL体系结构(Av765670802,P59) 60.03. 进阶-存储引擎-简介(Av765670802,P60) 61.04. 进阶-存储引擎-InnoDB介绍(Av765670802,P61) 62.05. 进阶-存储引擎-MyISAM和Memory(Av765670802…...

编程日记 2023/10/27 9:11:14

A - Block Sequence

思路&#xff1a; &#xff08;1&#xff09;对于每一个位置&#xff0c;有三种选择&#xff0c;一是选择删除&#xff0c;二是选择当排头清洗&#xff0c;三是被前面的排头清洗&#xff1b; &#xff08;2&#xff09;注意到总是要求将最后一位数清洗完&#xff0c;即前面信…...

编程日记 2023/10/27 9:10:13

0031【Edabit ★☆☆☆☆☆】【使用箭头函数】Using Arrow Functions

0031【Edabit ★☆☆☆☆☆】【使用箭头函数】Using Arrow Functions data_structures language_fundamentals Instructions Create a function that returns the given argument, but by using an arrow function. An arrow function is constructed like so: arrowFunc(/*p…...

编程日记 2023/10/27 9:09:11

C#，数值计算——分类与推理，基座向量机（SVM，Support Vector Machines）的计算方法与源程序

把 Support Vector Machines 翻译成 支持向量机 是书呆子翻译。基座向量机 不好吗。 1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// Support Vector Machines /// </summary> public class Svm { priv…...

编程日记 2023/10/27 9:08:11

面试总结之消息中间件

RabbitMQ的消息如何实现路由 RabbitMQ是一个基于AMQP协议实现的分布式消息中间件&#xff0c;AMQP具体的工作机制是生产者将消息发送到RabbitMQ Broker上的Exchange交换机上&#xff0c;Exchange交换机将收到的消息根据路由规则发给绑定的队列&#xff08;Queue&#xff09;&am…...

编程日记 2023/10/27 9:07:10

Java零基础入门-逻辑运算符

前言 Java是一种广泛应用的编程语言&#xff0c;在在这里插入代码片软件开发中有着重要的地位。本文将介绍Java中的逻辑运算符及其在程序设计中的应用&#xff0c;希望能够帮助零基础的读者更好地入门学习Java。 摘要 本文将介绍Java中的三种逻辑运算符&#xff1a;与运算符…...

编程日记 2023/10/27 9:06:09

图的应用3.0-----拓扑排序

目录 前言 AOE网 1.相关概念 2.AOE网特征 拓扑排序 1.基本概念 2.方法步骤 3.拓扑排序的应用 拓扑排序代码实现 1.邻接矩阵的代码 2.邻接表代码 前言 今天我们学习图的应用----拓扑排序&#xff0c;说到排序&#xff0c;你们是不是会想到冒泡排序&#xff0c;插入排序…...

编程日记 2023/10/27 9:05:08

Unity之ShaderGraph如何实现冰冻效果

前言 今天我们来实现一个冰冻的效果，非常的炫酷哦。 如下图所示： 主要节点 Voronoi：根据输入UV生成 Voronoi 或Worley噪声。Voronoi 噪声是通过计算像素和点阵之间的距离生成的。通过由输入角度偏移控制的伪随机数偏移这些点，可以生成细胞簇。这些单元的规模以及产生的…...

编程日记 2023/10/27 9:04:06

解决 viteprees 中 vp-doc 内置样式影响组件预

解决 viteprees 中 vp-doc 样式影响组件预览 问题 当使用"vitepress": "1.0.0-rc.22"作为组件库文档时&#xff0c;会自动引入vitepress的默认主题&#xff0c; 其中vp-doc中有大量的html标签样式 ... .vp-doc table {display: block;border-collapse: …...

编程日记 2023/10/27 9:03:05

flask 和fastdeploy 快速部署 yolov3

服务端 from flask import Flask,request,render_template from flask import session,redirect,jsonify import cv2 import numpy as np import base64 import os import fastdeploy as fd import datetime,timeapp=Flask(__name__)from logging import config,getLogger lo…...

编程日记 2023/10/27 9:02:04

2.4.快速排序——先分区再递归，为什么它平均这么快却可能退化？

2.4.快速排序——先分区再递归&#xff0c;为什么它平均这么快却可能退化&#xff1f; 系列&#xff1a;搜索与排序 | 第 4 篇&#xff0c;共 16 篇 难度&#xff1a;⭐⭐⭐☆☆ 中等 标签&#xff1a;排序 快速排序 分治 随机化 三路快排 上一篇&#xff1a;2.3.插入排序——像…...

编程新知 2026/4/3 21:13:48

2026上海紧固件专业展6月24-26日国家会展中心（上海）举办

2026第十六届上海紧固件专业展&#xff08;Fastener Expo Shanghai 2026&#xff09;将于6月24日至26日在国家会展中心&#xff08;上海&#xff09;举办。本届展会围绕紧固件全产业链展开&#xff0c;涵盖紧固件成品、冷镦成型设备、模具耗材、检测包装、表面处理以及原材料供…...

编程新知 2026/4/3 20:47:33

当单片机玩起音乐魔法

基于单片机的音乐律动播放器音乐盒串口远程控制&#xff08;LCD1286 1100056-基于单片机的音乐律动播放器音乐盒串口远程控制&#xff08;LCD12864、六首音乐、PWM调频、音频编码、源代码、仿真、流程图、物料清单、Proteus&#xff09; 功能描述&#xff1a;基于单片机的音乐律…...

编程新知 2026/4/3 20:19:17

AA-PEG-C12/C16/C18，乙酸聚乙二醇月桂/棕榈/硬脂酸酯，一类结合了乙酸、聚乙二醇和长链烷基的化合物

一.名称英文名称&#xff1a;AA-PEG-C12/C16/C18&#xff0c;Acetic Acid-PEG-C12/C16/C18中文名称&#xff1a;乙酸聚乙二醇月桂/棕榈/硬脂酸酯&#xff0c;乙酸-PEG-月桂/棕榈/硬脂酸酯分子量&#xff1a;1k&#xff0c;2k&#xff0c;3.4k&#xff0c;5k&#xff0c;10k&…...

编程新知 2026/4/3 19:55:09

ai辅助开发：让快马平台智能诊断并生成最优的wsl ubuntu环境配置方案

在折腾开发环境配置的路上&#xff0c;相信不少朋友都踩过WSL安装Ubuntu的坑。从选择版本、处理依赖到解决网络问题&#xff0c;整个过程就像开盲盒。最近尝试用AI辅助完成这个任务时&#xff0c;意外发现了一条捷径——通过智能交互就能生成量身定制的环境方案。 传统配置的痛…...

编程新知 2026/4/3 19:34:54

测试计划详细说明

一份高质量的测试计划本质上是质量风险的防御蓝图&#xff0c;它要在有限资源和无限质量诉求之间找到平衡点。我将从结构、内容、决策逻辑三个维度展开&#xff0c;并提供一个可直接落地的框架。一、测试计划的核心定位测试计划的本质回答三个问题&#xff1a;测什么&#xff1…...

编程新知 2026/4/3 19:00:27

当 95% 泳池拒绝轮椅人群时，“泳池升降机” 正在创造包容性蓝海​

在一座城市的游泳馆里&#xff0c;坐在轮椅上的小李望着眼前的泳池&#xff0c;眼神中满是渴望却又带着一丝无奈。以往&#xff0c;他只能看着别人在水中畅游&#xff0c;因为大部分泳池没有适合他这样行动不便者入水的设施。但最近&#xff0c;这家游泳馆引入了一款便携式泳池…...

编程新知 2026/4/3 19:00:27

c++如何通过文件映射mmap在多进程间实现高性能数据共享【进阶】

mmap 多进程共享必须用 MAP_SHARED&#xff0c;因其确保所有进程映射同一物理页并同步回文件&#xff1b;MAP_PRIVATE 为写时复制&#xff0c;修改不共享。需 O_RDWR 打开、ftruncate 预设大小&#xff0c;并配合适当同步机制。为什么 mmap 在多进程共享中必须用 MAP_SHARED 而…...

编程新知 2026/4/3 18:50:26

移动端ncnn部署YOLOv11：从官方转换到实战排错

1. 移动端部署YOLOv11的完整流程 在移动端部署YOLOv11模型&#xff0c;ncnn无疑是最佳选择之一。这个轻量级的高性能神经网络前向计算框架&#xff0c;专为移动端优化设计。我最近刚完成一个项目&#xff0c;需要把YOLOv11部署到安卓设备上&#xff0c;整个过程虽然踩了不少坑…...

编程新知 2026/4/3 18:30:14

杰理AD14N/AD15N---自定义GPIO唤醒与长按键开关机配置实战

1. 认识杰理AD14N/AD15N的GPIO唤醒机制 第一次接触杰理AD14N/AD15N芯片的开发者&#xff0c;往往会被其GPIO唤醒机制搞得一头雾水。我刚开始调试时也踩过不少坑&#xff0c;比如明明按照手册配置了唤醒引脚&#xff0c;设备却怎么都唤不醒。后来才发现&#xff0c;问题出在对底…...

编程新知 2026/4/3 18:03:30