load和DOMContentLoaded的区别

最新推荐文章于 2021-11-23 23:21:23 发布
最新推荐文章于 2021-11-23 23:21:23 发布
阅读量139 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： html 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lihanhan98/article/details/121053360
本文详细介绍了网页加载过程中load和DOMContentLoaded两个关键事件的区别。load事件会在整个页面及其所有依赖资源如样式表和图片完全加载后触发，而DOMContentLoaded事件则在纯HTML解析完成后触发，不等待样式表、图片等资源。了解这两个事件对于优化网页性能和编写响应式代码至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。

2.当纯HTML被完全加载以及解析时，DOMContentLoaded 事件会被触发，而不必等待样式表，图片或者子框架完成加载。

window.onload和DOMContentLoaded的区别
skysys的研究小屋
08-13 3040
一、何时触发这两个事件？ 1、当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。 2、当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。 二、为什么要区分？ 开发中我们经常需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的。这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函
defer和async
qq_43812731的博客
11-11 842
浏览器渲染原理 HTML 文档被加载和解析完成之前，浏览器做了哪些事情呢？那我们需要从浏览器渲染原理来谈谈。 浏览器向服务器请求到了 HTML 文档后便开始解析，产物是 DOM（文档对象模型），到这里 HTML 文档就被加载和解析完成了。如果有 CSS 的会根据 CSS 生成 CSSOM（CSS 对象模型），然后再由 DOM 和 CSSOM 合并产生渲染树。有了渲染树，知道了所有节点的样式，下面便根据这些节点以及样式计算它们在浏览器中确切的大小和位置，这就是布局阶段。有了以上这些信息，下面就把节点绘制到浏览
DOMContentLoad和Load区别
G&C的博客
04-06 1516
区别 具体区别已经有很多人去详细讲述了，简单来说： DOMContentLoad是HTML Dom结构完成时触发，相当于jquery.ready。 Load是页面整体完成时触发，即所有加载资源与js脚本执行完毕后触发，相当于jquery.load。 用一张图即可看出区别，chrome的network截图。其中蓝线为DOMContentLoaded完成时间点，红线为Load完成时间点 DOMCon...
事件DOMContentLoaded和load的区别
Bigsmile91的专栏
09-14 2332
他们的区别是，触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。 DOM文档加载的步骤为 解析HTML结构。加载外部脚本和样式表文件。解析并执行脚本代码。DOM树构建完成。//DOMContentLoaded加载图片等外部文件。页面加载完毕。//load 在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。 用原生js可以这
domcontentloaded和load的区别
qq_38677540的博客
05-18 145
DOMContentLoaded 　当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。 load 　load 仅用于检测一个完全加载的页面，页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件。 // 不兼容老的浏览器，兼容写法见[jQuery中ready与load事件](http://www.imooc.com/code/3253)，或用jQuery document.addEv.
DOMContentLoaded和Load的区别
qq_43812731的博客
11-11 1931
详解 DOMContentLoaded 首先我们先直观地感受下什么是 DOMContentLoaded。打开 Chrome DevTools，切到 Network 面板，重新加载网页，得到如下截图： 标记 1 指向的蓝线以及标记 2 指向的蓝色字 “DOMContentLoaded:1.29s” 均表示 DOMContentLoaded 这个事件触发的时间，只不过表现形式不同而已。 直观地感受了 DOMContentLoaded，那它究竟是个什么东东呢？ 什么是 DOMContentLoaded 我们先来
finish和load和domcontentloaded的区别
04-12
这是一个很好的问题！...- "load" 事件则是在整个文档页面、图片和其他资源全部下载完成后触发。 - "unload" 事件则是在用户离开当前页面之前触发。 这些事件都是用来处理网页加载的，但各自的触发时机有所不同。
load和DOMContentLoaded有什么区别？
04-27
`load`事件和`DOMContentLoaded`事件都是在HTML页面加载时触发的事件，但它们之间有一些区别。 `load`事件是在页面中所有资源(如图片、脚本、样式等)加载完毕后触发的。这表示页面已经完全加载完成，包括所有的资源...
DOMContentLoaded和load的区别
weixin_34293911的博客
02-05 273
为什么80%的码农都做不了架构师？>>> ...
HTML笔记：DOMContentLoaded和load的区别
weixin_45295262的博客
12-26 1316
看到这个说的比较好，就转载作为笔记，方便自己复习时候看看. 来源（建议看她写的，比较美观）： https://www.cnblogs.com/gg-qq/p/11327972.html 作者：guo&qi 一、概念 DOMContentLoaded 　　当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。 load 　　load 仅用于检测一个完全加载的页面，页面的html、css、js、图片等资源都已经加载完
DOMContentLoaded与load的区别
Frank的博客
02-28 754
        DOMContentLoaded顾名思义，就是dom内容加载完毕。那什么是dom内容加载完毕呢？我们从打开一个网页说起。当输入一个URL，页面的展示首先是空白的，然后过一会，页面会展示出内容，但是页面的有些资源比如说图片资源还无法看到，此时页面是可以正常的交互，过一段时间后，图片才完成显示在页面。从页面空白到展示出页面内容，会触发DOMContentLoaded事件。而这段时间就是...
DOMContentLoaded 与 load 的区别
lio-zero 的博客
11-23 165
当页面中的所有节点都已在 DOM 树中构建时，将触发 DOMContentLoaded 事件。当所有资源(如图像和子帧)都已完全加载时，将触发 load 事件。 readyState 属性 IE 8 和旧版本的 IE 不支持 DOMContentLoaded 事件。 为了支持旧版本 IE 中的行为，我们可以使用 readyState 属性检查文档是否已完全加载： const ready = fun...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值