深入理解 Document Load 和 Document Ready 的区别
目录
前言：
一、Document Ready
二、Document Load
三、理解和总结
前言：
在前端开发中，理解页面加载的不同阶段是至关重要的。特别是当我们需要在页面加载到特定阶段时执行某些操作时，我们需要知道应该使用 document ready 还是 document load 事件。这两个事件在页面加载过程中发生的时间点不同，它们提供了在不同时间点运行代码的能力。本文将深入探讨 document ready 和 document load 的区别，以及如何在实际开发中正确使用它们。
一、Document Ready
- 用法：
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
- 用法：
document 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 Load 和 Document Ready 的区别
目录 前言： 一、Document Ready 二、Document Load 三、理解和总结 前言： 在前端开发中，理解页面加载的不同阶段是至关重要的。特别是当我们需要在页面加载到特定阶段时执行某些操作时，我们需要知道应该使用 document ready 还…...
有趣的算法（七） ——快速排序改进算法
有趣的算法（七） ——快速排序改进算法 目录 有趣的算法（七） ——快速排序改进算法 本文章向大家介绍有趣的算法（七） ——快速排序改进算法，主要内容包括其使用实例、应用技巧、基本知识点总结…...
Vue3 + Tsx 集成 ace-editor编辑器
Ace Editor介绍 Ace Editor（全名：Ajax.org Cloud9 Editor）是一个开源的代码编辑器，旨在提供强大的代码编辑功能，通常用于构建基于Web的代码编辑应用程序。它最初由Cloud9 IDE开发，现在由开源社区维护。 主…...
TypeScritpt中的namespace
namesapce 它是在ES模块诞生前，ts自己发明的模块功能，目前已经不推荐使用了，namespace意为命名空间，就是模块化的意思。 1. 基本用法 namespace用来建立一个容器，内部的所有变量和函数只能在容器内部才能使用。 nam…...
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.…...
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的作用域 在之前学习的过程中，我们把作用域定义为：限定程序中变…...
什么是命令行参数解析和选项处理？
在C语言中，命令行参数解析和选项处理是一项关键的编程技术，它使程序能够从命令行接受参数和选项，以在运行时进行不同的配置和控制。这对于命令行工具、应用程序和脚本编写非常重要，因为它允许用户以不同的方式自定义程序的行为。本…...
网络协议--TFTP：简单文件传送协议
15.1 引言 TFTP(Trivial File Transfer Protocol)即简单文件传送协议，最初打算用于引导无盘系统（通常是工作站或X终端）。和将在第27章介绍的使用TCP的文件传送协议（FTP）不同，为了保持简单和短小࿰…...
MongoDB 的集群架构与设计
一、前言 MongoDB 有三种集群架构模式，分别为主从复制（Master-Slaver）、副本集（Replica Set）和分片（Sharding）模式。 Master-Slaver 是一种主从复制的模式，目前已经不推荐使用。Re…...
volatile 系列之实现原理
我们通过volatile解决了由于编译器的指令重排序导致的可见性问题，这意味着volatile 底层用到了内存屏障，下面我们从它的部分源码中找一下内存屏障相关的痕迹。 通过javap-V VolatileExample.class打印VolatileExample类的字节指令如下。 public static …...
【黑马程序员】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…...
A - Block Sequence
思路： （1）对于每一个位置，有三种选择，一是选择删除，二是选择当排头清洗，三是被前面的排头清洗； （2）注意到总是要求将最后一位数清洗完，即前面信…...
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…...
C#，数值计算——分类与推理，基座向量机（SVM，Support Vector Machines）的计算方法与源程序
把 Support Vector Machines 翻译成 支持向量机 是书呆子翻译。基座向量机 不好吗。 1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// Support Vector Machines /// </summary> public class Svm { priv…...
面试总结之消息中间件
RabbitMQ的消息如何实现路由 RabbitMQ是一个基于AMQP协议实现的分布式消息中间件，AMQP具体的工作机制是生产者将消息发送到RabbitMQ Broker上的Exchange交换机上，Exchange交换机将收到的消息根据路由规则发给绑定的队列（Queue）&am…...
Java零基础入门-逻辑运算符
前言 Java是一种广泛应用的编程语言，在在这里插入代码片软件开发中有着重要的地位。本文将介绍Java中的逻辑运算符及其在程序设计中的应用，希望能够帮助零基础的读者更好地入门学习Java。 摘要 本文将介绍Java中的三种逻辑运算符：与运算符…...
图的应用3.0-----拓扑排序
目录 前言 AOE网 1.相关概念 2.AOE网特征 拓扑排序 1.基本概念 2.方法步骤 3.拓扑排序的应用 拓扑排序代码实现 1.邻接矩阵的代码 2.邻接表代码 前言 今天我们学习图的应用----拓扑排序，说到排序，你们是不是会想到冒泡排序，插入排序…...
Unity之ShaderGraph如何实现冰冻效果
前言 今天我们来实现一个冰冻的效果，非常的炫酷哦。 如下图所示： 主要节点 Voronoi：根据输入UV生成 Voronoi 或Worley噪声。Voronoi 噪声是通过计算像素和点阵之间的距离生成的。通过由输入角度偏移控制的伪随机数偏移这些点，可以生成细胞簇。这些单元的规模以及产生的…...
解决 viteprees 中 vp-doc 内置样式影响组件预
解决 viteprees 中 vp-doc 样式影响组件预览 问题 当使用"vitepress": "1.0.0-rc.22"作为组件库文档时，会自动引入vitepress的默认主题， 其中vp-doc中有大量的html标签样式 ... .vp-doc table {display: block;border-collapse: …...
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…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中，我们已经大致实现了rpc服务端的各项功能代…...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
Spring是如何解决Bean的循环依赖：三级缓存机制
1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间互相持有对方引用，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态
前言 在人工智能技术飞速发展的今天，深度学习与大模型技术已成为推动行业变革的核心驱动力，而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心，系统性地呈现了两部深度技术著作的精华：…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能
指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...