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

四、（JS）JS中常见的加载事件

news 2026/4/5 3:59:58

一、文档加载监听

（1）抛出疑惑，什么是文档加载监听？为什么要有这个东西？

老样子，我们先讲一个场景，带着大家熟悉为什么会有文档加载监听，是来解决什么问题来着的。

我们先看下这段代码~

下面这段代码是不是我们可以将boxEl这个元素设置背景为红色？

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;}</style>
</head><body><div class="box"></div><script>var boxEl = document.querySelector(".box")boxEl.style.backgroundColor = "red"</script></body></html>

我们看下效果，很明显可以。

我们再把代码位置换一下，这个时候可以设置背景成功吗？

答：很明显不行，因为执行js代码里的时候，还找不到boxEl元素（还没加载）。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;}</style>
</head><body><script>var boxEl = document.querySelector(".box")boxEl.style.backgroundColor = "red"</script><div class="box"></div></body></html>

 

 

可以解决这个问题吗？答：当然可以，我们只需要将这行代码执行完就可以了。

  <div class="box"></div>

换句话来说，我们只需要把js里面的设置背景相关的代码，写一个事件监听。

（2）文档加载监听 onload

当我们这样子写的时候，function里面的代码不会立即执行，只有等浏览器把全部加载完成过后才会回调这个函数。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;}</style>
</head><body><script>// 注册事件监听window.onload = function () {var boxEl = document.querySelector(".box")boxEl.style.backgroundColor = "red"}</script><div class="box"></div></body></html>

（3）DOMContentLoaded事件

DOMContentLoaded事件是在Web开发中经常使用的事件，它表示当文档的主体内容已经被完全加载并解析完成，但可能还包含一些外部资源如图片、样式表或脚本的异步加载。简单来说，当浏览器完成了HTML标签的解析，并认为页面的主要结构已经就绪时，DOMContentLoaded事件就会触发。

这个事件对于JavaScript开发者很重要，因为它意味着他们可以在DOM树准备就绪之后立即开始操作DOM元素，而不需要等待所有内容下载完毕。这意味着可以避免阻塞用户界面，提升用户体验。例如，你可以在这时候执行某些初始化逻辑或者开始动画效果。

所以如下代码中，img本身是内容的一部分，但是img中src指向的图片地址，就不是属于内容的一部分。（为什么？这是浏览器指定的哈，记住就好 不用过多纠结）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;}</style>
</head><body><script>// 注册事件监听window.addEventListener("DOMContentLoaded", function () {// 1. 这里可以操作box,box已经加载完毕var boxEl = document.querySelector(".box")boxEl.style.backgroundColor = "red"console.log("HTML内容加载完毕");})window.onload = function () {// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"// console.log("文档中所有资源都加载完毕");}</script><div class="box"><p>哈哈哈哈</p></div><a href="#">百度一下</a><img src="../images/dog.jpg" alt=""></body></html>

（4）window.onload 和 DOMContentLoaded区别

所以从上面2、3点可以得出结论了吧，我们总结一下。

  • DOMContendLoaded：浏览器已完全加载HTML，并构建了DOM树，但像<img>和样式表之类的外部资源可能尚未加载完成。（img本身是内容的一部分，但是img中src指向的图片地址，就不是属于内容的一部分。（为什么？这是浏览器指定的哈，记住就好 不用过多纠结））
  • load：浏览器不仅加载完成了HTML，还加载完成了所有外部资源：图片，样式等。

（5）验证区别

我在window.addEventListener监听的时候为什么打印不出来img图片占据的宽度和高度？

  1. 因为我在img元素里压根没跟他设置style=XXXX 
    <img src="../images/dog.jpg" alt="">

    <img src="../images/dog.jpg" alt="" style="width:200px;height:200px">

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;}</style>
</head><body><script>// 注册事件监听window.addEventListener("DOMContentLoaded", function () {// 1. 这里可以操作box,box已经加载完毕// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"// console.log("HTML内容加载完毕");// 2. 获取img对应图片的宽度和高度var imgEl = document.querySelector("img")console.log("图片的宽度和高度", imgEl.style.width, imgEl.style.height);})window.onload = function () {// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"console.log("文档中所有资源都加载完毕");}</script><div class="box"><p>哈哈哈哈</p></div><a href="#">百度一下</a><img src="../images/dog.jpg" alt=""></body></html>

 那我们该怎么拿img图片所占据的空间？用 offsetWidth offsetHeight

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;}</style>
</head><body><script>// 注册事件监听window.addEventListener("DOMContentLoaded", function () {// 1. 这里可以操作box,box已经加载完毕// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"// console.log("HTML内容加载完毕");// 2. 获取img对应图片的宽度和高度var imgEl = document.querySelector("img")// console.log("图片的宽度和高度", imgEl.style.width, imgEl.style.height);console.log("图片的宽度和高度", imgEl.offsetWidth, imgEl.offsetHeight);})window.onload = function () {// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"console.log("文档中所有资源都加载完毕");}</script><div class="box"><p>哈哈哈哈</p></div><a href="#">百度一下</a><img src="../images/dog.jpg" alt=""></body></html>

我们看下打印结果：说明什么？ 说明图片压根没加载出来。这个案例是不是验证了：

DOMContendLoaded：浏览器已完全加载HTML，并构建了DOM树，但像<img>和样式表之类的外部资源可能尚未加载完成。（img本身是内容的一部分，但是img中src指向的图片地址，就不是属于内容的一部分。（为什么？这是浏览器指定的哈，记住就好 不用过多纠结））

那我们放到window.onload试一下看看。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;}</style>
</head><body><script>// 注册事件监听window.addEventListener("DOMContentLoaded", function () {// 1. 这里可以操作box,box已经加载完毕// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"// console.log("HTML内容加载完毕");// 2. 获取img对应图片的宽度和高度// var imgEl = document.querySelector("img")// console.log("图片的宽度和高度", imgEl.style.width, imgEl.style.height);// console.log("图片的宽度和高度", imgEl.offsetWidth, imgEl.offsetHeight);})window.onload = function () {// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"var imgEl = document.querySelector("img")console.log("文档中所有资源都加载完毕");console.log("图片的宽度和高度", imgEl.offsetWidth, imgEl.offsetHeight);}</script><div class="box"><p>哈哈哈哈</p></div><a href="#">百度一下</a><img src="../images/dog.jpg" alt=""></body></html>

打印结果如下，是不是验证成功了？

load：浏览器不仅加载完成了HTML，还加载完成了所有外部资源：图片，样式等。

相关文章：

四、（JS）JS中常见的加载事件

一、文档加载监听 &#xff08;1&#xff09;抛出疑惑&#xff0c;什么是文档加载监听&#xff1f;为什么要有这个东西&#xff1f; 老样子&#xff0c;我们先讲一个场景&#xff0c;带着大家熟悉为什么会有文档加载监听&#xff0c;是来解决什么问题来着的。 我们先看下这段…...

编程日记 2024/9/16 21:36:41

[网络]https的概念及加密过程

文章目录 一. HTTPS二. https加密过程 一. HTTPS https本质上就是http的基础上增加了一个加密层, 抛开加密之后, 剩下的就是个http是一样的 s > SSL HTTPS HTTP SSL 这个过程, 涉及到密码学的几个核心概念 明文 要传输的真正意思是啥 2)密文 加密之后得到的数据 这个密文…...

编程日记 2024/9/16 21:35:39

React 嵌套类名样式不生效

修改前 父级.blog样式生效&#xff0c;子级.circle样式不生效 // app/blog/page.js import styles from "./page.module.scss"export default function Blog () {return (<div className{styles.blog}><div classNamecircle><div /></div>…...

编程日记 2024/9/16 21:34:38

20Kg载重30分钟续航多旋翼无人机技术详解

一、机架与结构设计 1. 材料选择&#xff1a;为了确保无人机能够承载20Kg的负载&#xff0c;同时实现30分钟的续航&#xff0c;其机架材料需选用轻质高强度的材料&#xff0c;如碳纤维或铝合金。这些材料不仅具有良好的承重能力&#xff0c;还能有效减轻无人机的整体重量&…...

编程日记 2024/9/16 21:33:37

详解c++：认识类

文章目录 前言一、类是什么二、类&#xff08;class&#xff09;的使用publicprivate&#xff1a;protected&#xff1a; 前言 C 是一种面向对象的编程语言。面向对象编程是一种编程范式&#xff0c;它使用“对象”来设计软件应用程序。在面向对象编程中&#xff0c;对象包含了…...

编程日记 2024/9/16 21:32:36

HTML5中的重要元素详解

第3章 HTML5中的重要元素 3.1 html根元素 HTML文档中&#xff0c;元素html代表了文档的根&#xff0c;其他所有元素都是在该元素的基础上进行延伸或拓展的&#xff0c;该元素也是HTML文档的最外层元素&#xff0c;因此也称为根元素。 html元素的常用属性&#xff1a; manif…...

编程日记 2024/9/16 21:31:35

八股文知识汇总（常考）

八股文知识汇总&#xff08;常考&#xff09; 语言特性相关 JAVA知识 - JDK动态代理为什么只能代理有接口的类&#xff1f; 说一下对象创建的过程&#xff1f;ThreadLocal是什么&#xff1f;他的实现原理是什么&#xff1f;ThreadLocal会出现内存泄露吗&#xff1f;String、…...

编程日记 2024/9/16 21:29:33

unity 图片置灰shader

我和chatgpt真强&#xff01; 在 Unity 编辑器中&#xff0c;右键点击 Assets 文件夹&#xff0c;选择 Create -> Shader -> Unlit Shader。shader代码如下&#xff0c;尽管我看的不是很懂&#xff0c;但确实有用 Shader "Custom/GrayScaleShader" {Properti…...

编程日记 2024/9/16 21:28:31

【C语言】（指针系列2）指针运算+指针与数组的关系+二级指针+指针数组+《剑指offer面试题》

前言&#xff1a;开始之前先感谢一位大佬&#xff0c;清风~徐~来-CSDN博客&#xff0c;由于是时间久远&#xff0c;博主指针的系列忘的差不多了&#xff0c;所以有些部分借鉴了该播主的&#xff0c;有些地方如果解释的不到位&#xff0c;请翻看这位大佬的&#xff0c;感谢大家&…...

编程日记 2024/9/16 21:27:30

探索信号处理：使用傅里叶小波变换分析和恢复信号

在现代信号处理领域&#xff0c;傅里叶变换是分析和处理信号的一种基本工具。然而&#xff0c;传统的傅里叶变换在处理非平稳信号时存在局限性&#xff0c;因为它无法同时提供时间和频率的信息。为了克服这一挑战&#xff0c;傅里叶小波变换&#xff08;FSWT&#xff09;应运而…...

编程日记 2024/9/16 21:26:29

俄罗斯方块——C语言实践(Dev-Cpp)

目录 1、创建项目(尽量不使用中文路径) 2、项目复制 3、项目配置 ​1、调整编译器 2、在配置窗口选择参数标签 3、添加头文件路径和库文件路径 4、代码实现 4.1、main.c 4.2、draw.h 4.3、draw.c 4.4、shape.h 4.5、shape.c 4.6、board.h 4.7、board.c 4.8、cont…...

编程日记 2024/9/16 21:24:27

关于wp网站出现的问题

问题1 问题1&#xff1a;如果出现这个界面的问题 说明是根目录的index.php编码出了问题&#xff0c;用备份的源文件退换一下即可。 问题2 问题2&#xff1a;如果出现页面错位现象&#xff0c;可能是某个WP插件引起的问题&#xff0c;这里需要逐步排查插件&#xff0c;或者你刚…...

编程日记 2024/9/16 21:22:25

为什么H.266未能普及？EasyCVR视频编码技术如何填补市场空白

H.266&#xff0c;也被称为Versatile Video Coding&#xff08;VVC&#xff09;&#xff0c;是近年来由MPEG&#xff08;Moving Picture Experts Group&#xff09;和ITU&#xff08;International Telecommunication Union&#xff09;联合开发并发布的新一代国际视频编码标准…...

编程日记 2024/9/16 21:21:24

最全 高质量 大模型 -评估基准数据集（不定期更新）

评估基准是推动人工智能领域技术进步和应用落地的关键工具&#xff0c;通过这些基准&#xff0c;我们可以更全面地理解LLMs的能力&#xff0c;并指导未来的研究和实践。 评估基准&#xff0c;是一套衡量标准&#xff0c;就像老师用考试来检查学生学得怎么样。在大模型的世界里…...

编程日记 2024/9/16 21:20:23

react 中， navigate 跳转链接 2种写法

react 中&#xff0c; navigate 下面2种写法&#xff0c; 有什么区别, import { useNavigate } from "react-router-dom"; const navigate useNavigate(""); onClick{() > navigate("/signup")}import { Navigate } from "react-route…...

编程日记 2024/9/16 21:15:19

k8s Service 服务

文章目录 一、为什么需要 Service二、Kubernetes 中的服务发现与负载均衡 -- Service三、用例解读1、Service 语法2、创建和查看 Service 四、Headless Service五、集群内访问 Service六、向集群外暴露 Service七、操作示例1、获取集群状态信息2、创建 Service、Deployment3、创…...

编程日记 2024/9/16 21:11:15

安全建设当中的冷门知识

今天说点有趣的话题&#xff0c;也是因为在安全建设过程中&#xff0c;安全员也不太可能都按照最理想的状态去工作&#xff0c;有资源的问题&#xff0c;有管理惰性问题&#xff0c;当然也有管理者本身决策的问题。 安全行业起步较晚&#xff0c;16年才施行网络安全法&#xff…...

编程日记 2024/9/16 21:09:13

python画图|极坐标下的3D surface

前述学习过程中&#xff0c;我们已经掌握了3D surface的基本绘制技巧&#xff0c;详见链接&#xff1a; python画图|3D surface基础教程-CSDN博客 基础教程中的3D surface绘制位于笛卡尔坐标系&#xff0c;但有时候会用到极坐标绘图。虽然我们已经学过简单的极坐标绘图技巧&a…...

编程日记 2024/9/16 21:05:09

html+css+js网页设计 旅游 大理旅游7个页面

htmlcssjs网页设计 旅游 大理旅游7个页面 网页作品代码简单&#xff0c;可使用任意HTML辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&#…...

编程日记 2024/9/16 21:04:08

Day 29~42 JavaWeb

Java Web 1、基本概念 1.1、前言 web开发&#xff1a; web&#xff0c;网页的意思&#xff0c;www.baidu.com静态web html&#xff0c;css 提供给所有人看的数据始终不会发生变化动态web 淘宝&#xff0c;几乎是所有的网站 提供给所有人看的数据始终会发生变…...

编程日记 2024/9/16 21:01:05

瀚高数据库安全版v4.5.9在Docker里跑起来后，别忘了做这7件小事

瀚高数据库安全版容器化部署后的7个关键运维动作 当你成功在Docker中运行瀚高数据库安全版v4.5.9后&#xff0c;真正的挑战才刚刚开始。许多开发者误以为容器启动就意味着工作结束&#xff0c;实际上&#xff0c;这只是数据库生命周期管理的起点。本文将带你深入探索那些容易被…...

编程新知 2026/4/5 3:59:58

如何实施企业SEO网站推广

如何实施企业SEO网站推广 在当今数字化时代&#xff0c;企业的网站推广已经不能忽视搜索引擎优化&#xff08;SEO&#xff09;。SEO不仅是提高网站在搜索结果中排名的关键手段&#xff0c;更是吸引潜在客户、转化流量成交的有效途径。如何实施企业SEO网站推广&#xff0c;以达…...

编程新知 2026/4/5 1:55:52

Unity3D实战：从零构建竖屏飞机大战游戏

1. 竖屏游戏的基础设置 第一次打开Unity时&#xff0c;默认是横屏模式。我们需要做的第一件事就是把游戏改成竖屏。这个操作看似简单&#xff0c;但很多新手容易忽略几个关键点。在Game窗口右上角找到分辨率设置&#xff0c;点击加号新建一个预设。这里要特别注意选择"Asp…...

编程新知 2026/4/5 1:41:40

AD9910不止于原理图：巧用线性斜波发生器，打造可编程信号源的5个创意应用实例（附配置代码）

AD9910线性斜波发生器的5个工业级应用实战 当大多数开发者还在用AD9910做基础频率合成时&#xff0c;真正的高手已经在挖掘这颗1GSPS超高速DDS芯片的隐藏技能了。今天要重点介绍的线性斜波发生器&#xff08;Linear Ramp Generator&#xff09;功能&#xff0c;可能是你项目升级…...

编程新知 2026/4/5 1:25:22

Java 设计模式在 Spring 中的现代应用：构建优雅的企业级应用

Java 设计模式在 Spring 中的现代应用&#xff1a;构建优雅的企业级应用别叫我大神&#xff0c;叫我 Alex 就好。一、引言 大家好&#xff0c;我是 Alex。设计模式是软件设计中经过验证的解决方案&#xff0c;它们帮助我们解决常见的设计问题。Spring 框架作为 Java 企业级应用…...

编程新知 2026/4/5 1:00:49

游戏盾 SDK 混淆后失效？豁免规则与打包配置解决方案

做游戏开发的兄弟应该都遇到过这种坑&#xff1a;为了防止代码被反编译&#xff0c;给游戏做混淆的时候&#xff0c;把游戏盾 SDK 也一起混淆了&#xff0c;结果打包上线后发现&#xff0c;游戏盾直接失效——要么防护没效果&#xff0c;要么游戏连不上服务器&#xff0c;甚至直…...

编程新知 2026/4/4 23:43:33

从零构建ESP32 TWAI CAN库：驱动CyberGear微电机的实践指南

1. ESP32 TWAI CAN库开发背景 第一次接触小米CyberGear微电机时&#xff0c;我遇到了一个棘手的问题&#xff1a;市面上找不到现成的ESP32控制库。这款性能强劲的微型电机采用CAN总线通信&#xff0c;而ESP32内置的TWAI控制器&#xff08;其实就是CAN控制器&#xff09;正好可…...

编程新知 2026/4/4 22:18:14

JL杰理AC696N开发板PWM波形生成与控制(1)：频率、占空比

引言PWM这玩意儿&#xff0c;做调光、调速、甚至模拟音频都离不开。JL杰理AC696N的定时器自带PWM输出功能&#xff0c;配置起来不算复杂&#xff0c;但真要调出稳定的波形&#xff0c;有几个坑是绕不开的。比如初始化的时候LED会闪一下、占空比设0反而输出一个高电平、想换个引…...

编程新知 2026/4/4 21:05:43

第06章langchain之向量化和向量数据库

01-文本视频图片向量化#主要做相似度查询&#xff08;猜你喜欢&#xff09;如何确定相似&#xff1a;既要看大小也要看方向对比图片&#xff1a;维度向量&#xff08;嵌入&#xff09;模型&#xff1a;02-向量数据库#相似性搜索不是准确搜索举例&#xff1a;举例2&#xff1a;#…...

编程新知 2026/4/4 21:03:39

7分钟掌握WorkshopDL：打破平台壁垒的Steam创意工坊模组下载终极方案

7分钟掌握WorkshopDL&#xff1a;打破平台壁垒的Steam创意工坊模组下载终极方案 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 你是否在Epic Games Store或GOG平台购买了游戏&…...

编程新知 2026/4/4 20:19:10