[JS]DOMContentLoaded和load的区别

最新推荐文章于 2022-02-15 17:18:32 发布
最新推荐文章于 2022-02-15 17:18:32 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： js 文章标签： js load loadcontentload
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41650504/article/details/89379947
版权

document.DOMContentLoaded和window.load都是页面加载的时候触发的，只是加载时机不一样

页面的加载顺序：

1.从上往下解析html节点，生成dom树和css树

2.如果遇到js或css文件，则加载js脚本文件和css等

3.js脚本如果是内联，则会执行脚本，否则继续解析

4.在页面能显示内容的时候，会触发domcontentloaded，不会等待图片等资源加载

5.在图片等资源都加载完成后，才会触发load

SuperCuteMan
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
「深入探究Web页面生命周期：DOMContentLoaded、load、beforeunload和unload事件」
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
10-16 4145
页面生命周期的四个重要事件：DOMContentLoaded、load、beforeunload 和 unload，定义了页面从加载到卸载的不同阶段。这些事件可以帮助我们在合适的时机执行相关的操作，提供更好的用户体验和数据处理。DOMContentLoaded 事件在 HTML 和 DOM 树加载完成后触发，适用于执行与 DOM 相关的初始化操作。load 事件在整个页面及其外部资源加载完成后触发，适用于执行与页面渲染和交互相关的操作。
DOMContentLoaded和load
AnitaSun的博客
12-08 1790
概述 load事件：load 应该仅用于检测一个完全加载的页面 当一个资源及其依赖资源已完成加载时，将触发load事件。也就是说，页面的html、css、js、图片等资源都已经加载完之后才会触发 load 事件 DOMContentLoaded事件：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。也就是说，DOM 树已经构建完毕就会触发 DOMContentLoaded 事件 js 阻塞了什么 因为js在执行的过程
Q15.你了解DOMContentLoaded吗？
吞吞吐吐屠屠兔兔的博客
11-06 431
预备备~~~ 1.document.readyState属性描述文档的加载状态。 一个文档的readyState可以是以下之一： （1）loading / 正在加载 文档（document）仍在加载。 （2）interactive / 可交互 文档（document）已被解析，"正在加载"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。表示DOMC...
DOMContentLoaded与load的区别、触发时机
weixin_43933259的博客
06-26 424
一、DOMContentLoaded 与 load 事件 关于 DOMContentLoaded 和 load 事件，MDN对他们是这样描述的：DOMContentLoaded 文档地址、load 文档地址。 DOMContentLoaded 意思就是：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。 load 意思就是：当一个资源及其依赖资源已完成加载时，将触发 load 事件。 区别小结 简而言之，二者触发时间
DOMcontentload与load
four_lemmo的博客
04-15 8163
简介：DOMContentLoaded与load简介DOMContentLoaded事件在页面文档加载解析完毕之后马上执行。而不会等待图片文件和子框架页面的加载onloadload事件会在页面所有资源被加载进来之后才会触发load事件。load时间在DOMContentLoaded事件触发之后兼容性onload事件所有浏览器都支持，DOMContentLoaded事件，高级浏览器均支持E6、IE7...
js lazyload实现网页图片延迟加载特效
11-11
在网页设计中，为了提高页面加载速度和优化用户体验，一种常见的技术是图片延迟加载，也称为懒加载（Lazy Load）。JavaScript 是实现这一功能的主要工具，它允许我们在用户滚动到图片时才加载图片，而不是一次性加载...
Javascript封装DOMContentLoaded事件实例
01-19
最近在写一个Javascript的框架，刚把DOMContentLoaded事件封装好，略带小兴奋，把开发过程中遇到的原理和兼容性问题做篇笔记，省的忘记到处找。 我们在写js代码的时候，一般都会添加[removed]事件，主要是为了在DOM...
JS实现图片懒加载(lazyload)过程详解
10-15
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="JS实现图片懒加载(lazyload)过程详解"> ``` 2. **监听滚动事件**： - 使用JavaScript监听`window`...
JQ中$(window).load和$(document).ready区别与执行顺序
10-20
在JavaScript和jQuery中，`$(document).ready()`和`$(window).load()`是两种常见的事件绑定函数，它们分别用于在不同的页面加载阶段执行相应的代码。理解它们的区别和执行顺序对于优化网页性能和确保脚本正确运行至...
图片延迟加载，lazyload.js使用实例
08-20
`lazyload.js` 是一个实现图片延迟加载的JavaScript库，它的特点是轻量级且易于使用，没有多余的代码，使得开发者能够快速地集成到项目中。在本文中，我们将深入探讨`lazyload.js`的工作原理、使用方法以及如何在...
js中DOMContentLoaded和load的区别
dc1339485的博客
02-28 213
如题；DOMContentLoaded和load都是页面加载的时候触发的事件。区别在于触发的时机不一样。 浏览器渲染页面DOM文档加载的步骤： 1.解析HTML结构。 2.加载外部脚本和css文件。 3.解析并执行脚本代码。 4.DOM树构建完成。(此时会触发DOMContentLoaded事件) 5.加载外部图片等文件。 6.页面加载完毕。(此时会触发load事件) ...
JavaScript - DOMContentLoaded和Load的差异
wust_cyl的博客
08-13 194
转载博客:大佬 ORZ DOMContentLoaded顾名思义，就是dom内容加载完毕。 页面绘制的过程：当输入一个URL，页面的展示首先是空白的，然后过一会，页面会展示出内容，但是页面的有些资源比如说图片资源还无法看到，此时页面是可以正常的交互，过一段时间后，图片才完成显示在页面。从页面空白到展示出页面内容，会触发DOMContentLoaded事件。而这段时间就是HTML文档被加载和解析...
js domcontentloader
胡世林的博客
07-13 658
jq $(function)原型 domcontentloader
DOMContentLoaded与load事件
Marshall001的博客
07-12 948
MDN参考： - DOMContentLoaded - load区别 DOMContentLoaded: DOM解析完成即触发此事件，不等待styles, images等资源的加载 load：依赖的资源也已加载完成 DOMContentLoaded绑定到document，load绑定到window document.addEventListener('DOMContentLoaded', fun
DOMContentLoaded和Load
sinat_32490761的博客
08-27 242
一：DOMContentLoad和Load在什么时候被触发？ 二：我们一再强调将css放在头部，将js文件放在尾部，这样有利于优化页面的性能，为什么这种方式能够优化性能？ 三：在jQuery中，我们一般将函数调用写在ready方法内，这是为什么？ 首先我们来思考，当我们输入一个页面地址时，究竟发生了什么？ 1.浏览器先下载该地址对应的html页面 2.浏览器解析页面中的dom元素 3.开启下载线程...
DOMContentLoaded与onload加载顺序
逆水行舟
11-25 3447
window.onload = function() {     init();     doSomethingElse();   };   >    html>    head>      title>onload testtitle>      script>        function load() {           alert("load event detected!")
JS中的load和DOMContentLoaded
KAMHUNCHAN的博客
02-15 525
1. load 当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。 window.addEventListener('load', (event) => { console.log('page is fully loaded'); }); //也可以使用onload实现： window.onload = (event) => { console.log('page is fully loaded'); }; 2. DOMContentLoaded ...
资源加载和页面事件 load, ready, DOMContentLoaded等
热门推荐
Kylin的专栏
08-14 1万+
资源加载和页面事件理想的页面加载方式 解析HTML结构。 加载并解析外部脚本。 DOM树构建完成，执行脚本。//DOMInteractive –> DOMContentLoaded 加载图片、样式表文件等外部文件。 页面加载完毕。//window.onload 涉及到的事件 window.onload: 当页面全部加载完成（包括所有资源） document.onload: 当整个html文档加
load和DOMContentLoaded有什么区别？
最新发布
04-27
`load`事件和`DOMContentLoaded`事件都是在HTML页面加载时触发的事件，但它们之间有一些区别。 `load`事件是在页面中所有资源(如图片、脚本、样式等)加载完毕后触发的。这表示页面已经完全加载完成，包括所有的资源都已经下载完成，可以对页面进行操作。 `DOMContentLoaded`事件则是在页面的HTML和DOM树加载完成后触发的，这意味着在此事件触发前，所有的HTML标记已经完成解析，但是页面中的其他资源，如图片和脚本等可能还没有加载完成。因此，此事件常用于在页面加载完成后立即执行JavaScript代码。 总的来说，`load`事件是在页面和所有资源都加载完成后才触发，而`DOMContentLoaded`事件则是在页面的HTML和DOM树加载完成后立即触发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值