JS：window.onload 和 DOMContentLoaded 的区别

最新推荐文章于 2023-08-28 16:00:34 发布
最新推荐文章于 2023-08-28 16:00:34 发布
阅读量662 收藏 1
点赞数
分类专栏： 运行环境 JavaScript 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KongKong_Rac/article/details/108559980
版权

window.onload事件

当页面的资源（包括图片、视频等）全部加载完才会执行

DOMContentLoaded事件

只要DOM渲染完即可执行，此时图片、视频等可能还没有加载完

因此两者主要是触发时机不同，会先触发DOMContentLoaded，再触发window.onload事件。

TwoZeroZero
关注
专栏目录
window.onload和DOMContentLoaded的区别
skysys的研究小屋
08-13 2785
一、何时触发这两个事件？ 1、当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。 2、当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。 二、为什么要区分？ 开发中我们经常需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的。这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函
window的onload事件和domcontentloaded
weixin_49757430的博客
05-20 674
window的onload事件和domcontentloaded window.onload： 当一个资源及其依赖资源已完成加载时，将触发onload事件。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>操作对象被加载</title> <script> window.οnlοad=function(.
window.onload和DOMContentLoaded有什么区别
最新发布
yzp270663716的博客
08-28 169
DOMContentLoaded当初始的 HTML 文档被完全加载和解析完成后触发，不需等待样式表、图像和子框架的完成加载，仅需要 HTML 结构完全加载并解析，就可以触发该事件。window.onload当整个网页（包括资源如图像、样式表等）都加载完成后触发，只有当所有资源都完全加载完毕后，包括外部资源如图片、脚本、样式表等，才会触发该事件。window.onload和DOMContentLoaded有什么区别。
Window.onLoad 和 DOMContentLoaded事件的先后顺序
anddy926的专栏
04-06 2456
相信写js的，都知道window.onload吧，但是并不是每个人都知道DOMContentLoaded，其实即使你不知道，很有可能你也经常使用了这个东西。       一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中
解决window.onload延迟加载问题
weixin_30432179的博客
06-23 617
window.onload方法，表示当页面所有的元素都加载完毕，并且所有要请求的资源也加载完毕才触发执行function这个匿名函数里边的具体内容。这样肯定保证了代码在domReady之后执行。使用window.onload方法在文档外部资源不多的情况下不会有什么问题，但是当页面中有大量远程图片或要请求的远程资源时，我们需要让js在点击每张图片时，进行相应的操作，如果此时外部资源还没有加载完毕，点...
window.onload事件和window.afterload事件的区别
07-14
下面是 "window.onload" 事件和 "DOMContentLoaded" 事件之间的区别： 1. 触发时机： - window.onload 事件在整个页面及其所有资源（如图片和脚本）加载完成后触发。 - DOMContentLoaded 事件在页面的 DOM 结构...
前端面试题:1.页面加载完成(onload)之前触发的事件；2.History,Location,Window,Navigation的区别；3.e.target和e.currentTarget的区别
xiaolu567的博客
08-18 1131
当你触发一个元素的事件的时候，该事件从该元素的祖先元素传递下去，此过程为捕获，而到达此元素之后，又会向其祖先元素传播上去，此过程为冒泡。当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发,而无等待样式表、图像和子框架的完成加载。我们把四个事件第三个参数都设置为true，我们看看输出结果，可以看出触发的是d，而执行的元素是捕获的顺序。现在我们点击，看看输出的东西，可以看出触发的是d，而执行的元素是冒泡的顺序。用load是一个令人难以置信的流行的错误，所以要谨慎。...
window.onload和window.DOMContentLoaded的区别
aliven1的博客
09-28 876
DOMContentLoaded页面加载更快，js更早执行，不用等待图片加载完成
window的onload事件和domcontentloaded事件
MING23333的博客
09-01 1560
onload 当页面载入完毕后执行Javascript代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>操作对象被加载</title> <script> window.οnlοad=function(){ document.getElem...
DOMContentLoaded 与 onload的区别
beimuaihui的专栏
04-27 2074
 1.DOMContentLoadedDOMContentLoaded是  FF,Opera 9的特有的Event, 当所有DOM解析完以后会触发这个事件。 jquery的ready(示例:$("selector).ready(function(){})) ,MT的onDomReady IE下是scrollleft事件可以时就表示DomcontentLoaded:
从onload和DOMContentLoaded谈起
weixin_30788619的博客
03-01 172
这篇文章是对这一两年内几篇dom ready文章的汇总（文章的最后会标注参考文章），因为浏览器进化的关系，可能他们现在的行为与本文所谈到的一些行为不相符。我也并没有一一去验证，所以本文仅供参考，在具体开发中还是要以实践结果为准。 当onload事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。 当DOMContentLoaded事件触发时，仅当DOM加载完成，...
json中load和loads区别
gqyann的博客
07-12 403
json.dumps()将Python字典类型转换为json对象 json.loads()将json对象转换为Python字典类型 #!/usr/bin/python3 import json #Python 字典类型转换为 JSON 对象 data1 = { 'no' : 1, 'name' : 'Runoob', 'url' : 'http://www.runoob.com' } json_str = json.dumps(data1) print ("Python
window onload和$(document).ready()及DOMContentLoaded的区别（DOM加载完毕前后调用）
lwx931449660的博客
01-08 5292
这两个函数的差别就在于调用的时机不同，一般情况一个页面响应加载的顺序是：域名解析-加载html-加载js和css-加载图片等其他信息。在日常开发中我们经常需要获取页面的元素进行操作，而在编写代码的时候为了代码易读性我们会将js代码放在一起引入页面中，这就导致js引擎编译代码时可能会出现一些错误，如方法、变量未定义等，这是因为当操作页面DOM元素的js代码执行时，页面中相应的DOM元素还没有渲染，所...
js——onload和DOMContentLoaded入口函数方法
肖的博客
08-23 450
onload方法会等到dom元素都加载完毕，并且还会等到资源也加载完毕才会执行 DOMContentLoaded事件只会等到dom元素加载完毕，性能比onload更好 // window.onload=function(ev){ // var res=document.querySelectorAll('div'); // console.log(res...
关于HTML页面DOMContentLoaded和Window.onload区别
可爱的小牛牛的博客
05-31 1107
这两个事件都是在js原生开发时经常会用到的，比如需要对页面dom进行动态处理，这时就需要用到DOMContentLoaded和window.onload事件，大家都知道，就是在dom构建完毕后，才可以对dom元素进行操作，否则会获取不到相应的dom元素，但是DOMContentLoaded和window.onload还是有很大区别的，DOMContentLoaded在dom构建完成之后就会执行，如果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值