DOMContentLoaded vs onload

最新推荐文章于 2021-06-04 15:06:43 发布
最新推荐文章于 2021-06-04 15:06:43 发布
阅读量61 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： ui
原文链接：http://www.cnblogs.com/daishuguang/p/3398143.html
本文探讨了DOMContentLoaded与load事件的区别。DOMContentLoaded事件在页面解析完成后触发，而load事件则在所有资源加载完毕后触发。文章提供了性能测试链接，并讨论了这两种事件在实际应用中的优缺点。

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

http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html

 

The DOMContentLoaded event fires when parsing of the current page is complete; the load event fires when all files have finished loading from all resources, including ads and images. DOMContentLoaded is a great event to use to hookup UI functionality to complex web pages.

 

http://jsperf.com/onload-vs-domcontentloaded

 

 http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/

 

 http://optimizeasp.net/

 

http://dancewithnet.com/2010/04/21/even-faster-websites/

 

 

转载于:https://www.cnblogs.com/daishuguang/p/3398143.html

window.onload和DOMContentLoaded的区别
skysys的研究小屋
08-13 3042
一、何时触发这两个事件？ 1、当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。 2、当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。 二、为什么要区分？ 开发中我们经常需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的。这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函
比onload更快的DOMContentLoaded,readystatechange,doscroll的DOM加载事件
qq814374557的博客
07-18 2005
比onload更快的DOMContentLoaded,readystatechange,doscroll的DOM加载事件 有时候在想，onload是等所有元素加载完以后再执行，但是有时候我们并不想等待这么久才执行，可能有些业务需要在DOM元素加载完成以后马上就要执行。这个时候，就需要比onload更快的事件函数了，那就是DOMContentLoaded，readystatechange，还有do
适配IE浏览器的那些坑
Happy
09-22 2145
1.标签原先的浏览器验证码用的是object标签，可惜在我们最可爱的IE中居然变了样，没办法，就换成img标签，但是img有个隐藏特性，就是在设置“img.src”的时候，如果src一样的话，每次点击图片不会改变，所以要在后面加一个随机数字，或者日期 例如：img.src=”url&time=”+(new Date()).getTime();2.onload方法需求是在pdf加载完成后，隐藏加载提
html调用js文件中的标量,html异步加载文本以及onload、onerror的触发
weixin_28844235的博客
06-04 433
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？html异步加载文本以及onload、onerror的触发最近项目开发中，需要一些异步加载文件的操作，简单的可以通过XMLHttpRequest对象来获取，但其中还涉及一些跨域的文件访问，因此设想使用src属性的跨域能力来加载文件，这里做一下对onload、onerror的统计总结。1. traceur、requirej...
onload、代码监测、绑定监听、h5标签、css可继承样式
chanzhiliao的博客
08-17 310
1.document.ready 、onload和 window.onload 的区别 document.ready方法在DOM树加载完成后就会执行，而window.onload是在页面资源（比如图片和媒体资源，它们的加载速度远慢于DOM的加载速度）加载完成之后才执行。也就是说$(document).ready要比window.onload先执行。 了解body的onload事件的执行时间是非常重要的。onload事件是在网页加载完毕时执行的。当我们在JavaScript中想要操作某元素时而此元素还没有加载
domcontentloaded和onload
03-16
`DOMContentLoaded` 事件表示文档的 DOM 已经被完全加载和解析，不需要等待样式表、图像和子框架的完成加载。 `onload` 事件表示页面上所有的资源已经完成加载，包括图像、样式表、脚本等。
网页中DOMContentLoaded与onload哪个更早执行？
06-11
在网页加载过程中，DOMContentLoaded事件比onload事件更早执行。DOMContentLoaded事件是在网页DOM加载完成后就会触发，而onload事件是在网页DOM、图片、脚本、样式等所有资源都加载完成后才会触发。因此，...
8天入门：jQuery快速上手与DOMContentLoaded替代window.onload
为了解决这个问题，教程推荐了关于`window.onload()`的优化方法，如Brothercake的研究，但重点强调了jQuery的`$(document).ready()`函数，这是一个在DOM加载完成后立即执行的便捷工具。通过这个函数，开发者可以避免...
object标签与embad掉钱_HTML中使用Embed或Object标签，如何判断资源已经加载完毕
weixin_39857792的博客
12-19 658
你的位置:问答吧-> HTML/CSS-> 问题详情HTML中使用Embed或Object标签，如何判断资源已经加载完毕如题。举个例子： onafterupdate="printOut()"我进入页面时，希望加载一个资源，当我知道它加载完后，我会调用JS来打印该资源。但问题就是我现在不知道他什么时候才会加载完。...
浅谈html5网页内嵌视频
weixin_30687587的博客
01-30 690
更好的阅读体验：浅谈html5网页内嵌视频 如今在这个特殊的时代下：flash将死未死，微软和IE的历史问题，html5标准未定，苹果和谷歌的闭源和开源之争，移动互联网的大势所趋，浏览器各自为战...这些都导致web开发者在设计视频解决方案的时候相当困惑。本文围绕这个主题，来探讨一下相关的技术，原理和工具。 编码与格式的误区 很多人将编码和格式误认为是同一个东西，往往以视频文件的后缀来...
响应式网站视频处理iframe和embed高度自适应
老蔡学代码
09-12 3418
通过jquery控制一下即可,将高度设置为宽度的4:3。如需16:9请自行计算。 至于加到document.ready还是加到window.resize。根据客户的要求放即可。 //将ifram和embed的高度设置为宽度4:3 $("iframe").height($("iframe").width()/1.333333333333333); $("embed").height($("em...
embed预览pdf_网页上预览pdf文件的几种方案
weixin_39968490的博客
12-21 2764
网页上查看pdf的方案：1.使用adobe reader的插件2.使用在线office控件3.使用火狐开源项目pdf.js(浏览器需支持html5)4.将pdf转换为swf文件5.使用pdfobject.js下面我来讲一讲各种方案的实现，第一种使用adobe reader 插件就是需要用户安装adobe reader软件，ActiveX控件。window.onload = isAcrobatPlu...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值