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

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

news 2025/7/14 8:10:58

目录

前言：

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

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/7/9 17:20:48

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/7/12 23:08:12

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2025/7/13 14:23:48

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/6/21 10:39:11

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/7/13 9:18:44

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/7/14 6:28:46

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/9 9:20:33

Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

编程新知 2025/7/7 15:20:50

MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

编程新知 2025/7/8 0:08:58

第八部分：阶段项目 6：构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...

编程新知 2025/7/7 8:32:25