DOMContentLoaded和load事件的区别

最新推荐文章于 2021-11-23 23:21:23 发布
最新推荐文章于 2021-11-23 23:21:23 发布
阅读量851 收藏 2
点赞数 1
分类专栏： 照妖镜 # 事件 文章标签： load DOMContentLoaded
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mengshang529/article/details/98678862
版权

区别

  1. DOMContentLoaded事件

    页面dom加载完成触发，无需等待后续图片等资源

  2. load事件

    整个页面所有资源加载完成之后触发；load一定在DOMContentLoaded之后触发

梦殇918
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOMContentLoaded和load
AnitaSun的博客
12-08 1803
概述 load事件：load 应该仅用于检测一个完全加载的页面 当一个资源及其依赖资源已完成加载时，将触发load事件。也就是说，页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件 DOMContentLoaded事件：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。也就是说，DOM 树已经构建完毕就会触发 DOMContentLoaded 事件 js 阻塞了什么 因为js在执行的过程
DOMcontentload与load
four_lemmo的博客
04-15 8165
简介：DOMContentLoaded与load简介DOMContentLoaded事件在页面文档加载解析完毕之后马上执行。而不会等待图片文件和子框架页面的加载onloadload事件会在页面所有资源被加载进来之后才会触发load事件。load时间在DOMContentLoaded事件触发之后兼容性onload事件所有浏览器都支持，DOMContentLoaded事件，高级浏览器均支持E6、IE7...
js事件DOMContentLoaded与load
到达的专栏
10-18 4101
浅谈script标签中的async（异步脚本）和defer（延迟脚本）属性：https://www.cnblogs.com/jiasm/p/7683930.html (1)chrome浏览器中，看到network网络面板中有DOMContentLoaded与load两个数值，分别对应网络请求上相应标志线，这两个时间数值分别代表？ (2)一再强调将css放在头部，将js文件放在尾部(如：&l...
DOMContentLoaded与load的区别
陈喵喵的博客
03-11 1616
（参考https://www.cnblogs.com/caizhenbo/p/6679478.html）一、HTML的内容加载以及关于JS的执行顺序浏览器对HTML内容的加载是顺序加载，所以为了避免用户加载页面时等待过长时间甚至在JS脚本执行时浏览器还没有加载到其中相关的内容，我们尽量把JS脚本放在HTML的最后，即</body>之前。也可以使用window的onload事件，onlo...
Javascript封装DOMContentLoaded事件实例
01-19
最近在写一个Javascript的框架，刚把DOMContentLoaded事件封装好，略带小兴奋，把开发过程中遇到的原理和兼容性问题做篇笔记，省的忘记到处找。 我们在写js代码的时候，一般都会添加[removed]事件，主要是为了在DOM...
JS、CSS以及img对DOMContentLoaded事件的影响
12-01
MDN Web Docs提供了更直观的解释：DOMContentLoaded事件会在文档被完全加载和解析后触发，而不考虑样式表、图像和子框架是否完成加载。然而，样式表加载会阻塞脚本执行，这意味着如果一个`<script>`标签紧跟在一个`...
jquery中ready()函数执行的时机和window的load事件比较
01-19
jquery的ready()实现的是 DOMContentLoaded 事件，DOMContentLoaded与window load事件的区别 简单的说ready()是在文档加载完成就会触发,此时图片等资源可能还没有完全加载, load是在所有资源都加载完成后才会触发 看...
JQ中$(window).load和$(document).ready区别与执行顺序
10-20
在JavaScript和jQuery中，`$(document).ready()`和`$(window).load()`是两种常见的事件绑定函数，它们分别用于在不同的页面加载阶段执行相应的代码。理解它们的区别和执行顺序对于优化网页性能和确保脚本正确运行至...
js lazyload实现网页图片延迟加载特效
11-11
window.addEventListener('DOMContentLoaded', lazyLoad); ``` 3. **优化**：可以考虑添加 throttle 或 debounce 函数来减少滚动事件的触发频率，避免性能问题。同时，对于图片已经出现在视口但尚未加载的情况，...
DOMContentLoaded与load事件
Marshall001的博客
07-12 952
MDN参考： - DOMContentLoaded - load区别 DOMContentLoaded: DOM解析完成即触发此事件，不等待styles, images等资源的加载 load：依赖的资源也已加载完成 DOMContentLoaded绑定到document，load绑定到window document.addEventListener('DOMContentLoaded', fun
load与DOMContentLoaded
weixin_33835103的博客
05-13 189
https://yq.aliyun.com/articles/609917 head 中资源的加载 head 中 js 资源加载都会停止后面 DOM 的构建，但是不影响后面资源的下载。 css资源不会阻碍后面 DOM 的构建，但是会阻碍页面的首次渲染。 body 中资源的加载 body 中 js 资源加载都会停止后面 DOM 的构建，但是不影响后面资源的下载。 css 资源...
资源加载和页面事件 load, ready, DOMContentLoaded等
热门推荐
Kylin的专栏
08-14 1万+
资源加载和页面事件理想的页面加载方式 解析HTML结构。 加载并解析外部脚本。 DOM树构建完成，执行脚本。//DOMInteractive –> DOMContentLoaded 加载图片、样式表文件等外部文件。 页面加载完毕。//window.onload 涉及到的事件 window.onload: 当页面全部加载完成（包括所有资源） document.onload: 当整个html文档加
document load和document DOMContentLoaded两个事件的区别
薛跳跳的博客
05-29 5935
区别DOMContentLoaded: DOM解析完成即触发此事件，不等待styles, images等资源的加载load：依赖的资源也已加载完成DOMContentLoaded绑定到document，load绑定到windowdocument.addEventListener('DOMContentLoaded', function(event) { console.log("DOM ful...
JavaScript - DOMContentLoaded和Load的差异
wust_cyl的博客
08-13 194
转载博客:大佬 ORZ DOMContentLoaded顾名思义，就是dom内容加载完毕。 页面绘制的过程：当输入一个URL，页面的展示首先是空白的，然后过一会，页面会展示出内容，但是页面的有些资源比如说图片资源还无法看到，此时页面是可以正常的交互，过一段时间后，图片才完成显示在页面。从页面空白到展示出页面内容，会触发DOMContentLoaded事件。而这段时间就是HTML文档被加载和解析...
DOMContentLoaded和Load
sinat_32490761的博客
08-27 242
一：DOMContentLoad和Load在什么时候被触发？ 二：我们一再强调将css放在头部，将js文件放在尾部，这样有利于优化页面的性能，为什么这种方式能够优化性能？ 三：在jQuery中，我们一般将函数调用写在ready方法内，这是为什么？ 首先我们来思考，当我们输入一个页面地址时，究竟发生了什么？ 1.浏览器先下载该地址对应的html页面 2.浏览器解析页面中的dom元素 3.开启下载线程...
js中DOMContentLoaded和load的区别
dc1339485的博客
02-28 213
如题；DOMContentLoaded和load都是页面加载的时候触发的事件。区别在于触发的时机不一样。 浏览器渲染页面DOM文档加载的步骤： 1.解析HTML结构。 2.加载外部脚本和css文件。 3.解析并执行脚本代码。 4.DOM树构建完成。(此时会触发DOMContentLoaded事件) 5.加载外部图片等文件。 6.页面加载完毕。(此时会触发load事件) ...
DOMContentLoaded 与 load 的区别
lio-zero 的博客
11-23 110
当页面中的所有节点都已在 DOM 树中构建时，将触发 DOMContentLoaded 事件。当所有资源(如图像和子帧)都已完全加载时，将触发 load 事件。 readyState 属性 IE 8 和旧版本的 IE 不支持 DOMContentLoaded 事件。 为了支持旧版本 IE 中的行为，我们可以使用 readyState 属性检查文档是否已完全加载： const ready = fun...
谈谈load事件与DOMCurrentLoaded事件的区别
小柒的前端之旅
09-14 1054
前面的话 前面两篇内容介绍关于浏览器的渲染原理，这篇文章接着谈谈load事件与DOMCurrentLoaded事件。 提出问题 打开Chrome浏览器的network面板，下面有两个数值，这两个数值代表什么？ 我们常说的将css文件放在头部，将js文件放在尾部，这样有利于页面的性能优化，为什么呢？ 在用jquery的时候，我们一般都会将函数调用写在ready方法内，这是什么原理？ 给出定义 ...
load和DOMContentLoaded有什么区别？
最新发布
04-27
`load`事件和`DOMContentLoaded`事件都是在HTML页面加载时触发的事件，但它们之间有一些区别。 `load`事件是在页面中所有资源(如图片、脚本、样式等)加载完毕后触发的。这表示页面已经完全加载完成，包括所有的资源...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值