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

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

news 2026/4/3 23:03:16

目录

前言：

一、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

docker 安装 MrDoc

这里写目录标题一、说明二、安装1. 将离线包上传到root&#xff0c;导入docker离线包2. 创建并运行容器3.账号admin&#xff0c;初始密码获取如下一、说明 doc、git、nexus之类不是常用的&#xff0c;而本身又包含数据库、软件或者nginx之类的&#xff0c;用docker来安装是不错…...

编程新知 2026/4/3 20:13:13

Docker 快速通关

一、Docker 大致介绍 Docker 可以帮助我们完成应用的 运行&#xff08;run&#xff09;、构建&#xff08;build&#xff09; 和 分享&#xff08;share&#xff09;。 它的核心目标很简单&#xff1a; 把应用和环境打包起来让应用在不同机器上尽量保持一致方便部署、迁移和…...

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

高效微信聊天记录管理：解决数据丢失风险的本地化方案

高效微信聊天记录管理&#xff1a;解决数据丢失风险的本地化方案 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeChat…...

编程新知 2026/4/3 19:32:53

计算机毕业设计：Python中国地铁网络智能分析系统 Flask框架 数据分析 可视化 高德地图 数据挖掘 机器学习 爬虫（建议收藏）✅

博主介绍&#xff1a;✌全网粉丝10W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业项目实战6年之久&#xff0c;选择我们就是选择放心、选择安心毕业✌ > &#x1f345;想要获取完整文章或者源码&#xff0c;或者代做&#xff0c;拉到文章底部即可与…...

编程新知 2026/4/3 18:46:25

Python对象生命周期全链路追踪，从PyObject_MALLOC到gc_collect：一线工程师压测验证的5个致命内存误用场景

第一章&#xff1a;Python对象生命周期全链路追踪概览Python对象的生命周期涵盖创建、使用、引用管理直至最终销毁的全过程。理解这一链条对诊断内存泄漏、优化资源使用及编写健壮代码至关重要。对象并非仅在 __init__ 中诞生&#xff0c;也非仅靠 del 显式终结&#xff1b;其真…...

编程新知 2026/4/3 18:42:20

Outfit字体：如何用专业几何无衬线字体打造品牌视觉革命

Outfit字体&#xff1a;如何用专业几何无衬线字体打造品牌视觉革命 【免费下载链接】Outfit-Fonts The most on-brand typeface 项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts 你是否曾为寻找一款既能体现品牌个性&#xff0c;又能在各种数字场景中完美呈现…...

编程新知 2026/4/3 18:32:17

在Ubuntu 24.04上从源码编译PETSc：一个给计算科学新手的保姆级避坑指南

在Ubuntu 24.04上从源码编译PETSc&#xff1a;一个给计算科学新手的保姆级避坑指南 第一次在Ubuntu上编译科学计算库的经历&#xff0c;往往像闯进了一个满是隐藏陷阱的迷宫。作为过来人&#xff0c;我完全理解当看到满屏红色错误提示时的无助感——那些神秘的configure参数、突…...

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

Pixel Epic在MBA教学中的应用：学生用像素界面完成商业计划书作业案例

Pixel Epic在MBA教学中的应用&#xff1a;学生用像素界面完成商业计划书作业案例 1. 引言&#xff1a;当商业教育遇上像素冒险 在传统MBA教学中&#xff0c;商业计划书撰写往往是让学生头疼的作业任务。学生们需要花费大量时间收集数据、分析市场、构建财务模型&#xff0c;最…...

编程新知 2026/4/3 17:31:13

突破音频格式壁垒：QMCDecoder开源工具实现无损音频自由转换

突破音频格式壁垒&#xff1a;QMCDecoder开源工具实现无损音频自由转换 【免费下载链接】qmc-decoder Fastest & best convert qmc 2 mp3 | flac tools 项目地址: https://gitcode.com/gh_mirrors/qm/qmc-decoder 问题&#xff1a;当音乐被数字锁链束缚——QMC格式的…...

编程新知 2026/4/3 15:06:52

5MB轻量级中文字体：WenQuanYi Micro Hei完全指南

5MB轻量级中文字体&#xff1a;WenQuanYi Micro Hei完全指南 【免费下载链接】fonts-wqy-microhei Debian package for WenQuanYi Micro Hei (mirror of https://anonscm.debian.org/git/pkg-fonts/fonts-wqy-microhei.git) 项目地址: https://gitcode.com/gh_mirrors/fo/fon…...

编程新知 2026/4/3 15:04:52