DOMContentLoaded

博客详细介绍了DOM文档的加载流程,从解析HTML到加载外部资源,直到DOMContentLoaded和load事件的触发。强调了DOMContentLoaded事件在页面内容可交互时触发,适合用于执行依赖DOM结构的代码,而非等待所有资源加载完毕的load事件。还提到了IE中检测DOM加载状态的不同方法,并给出了jQuery的对应写法。

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

DOM文档加载流程:
(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。// DOMContentLoaded 相当于jQuery中的ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。// load 

MDN解析(DOMContentLoaded )当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完成加载。另一个不同的事件 load 应该仅用于检测一个完全加载的页面。 在使用 DOMContentLoaded 更加合适的情况下使用 load 是一个令人难以置信的流行的错误,所以要谨慎。注意:DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。

MDN解析(document.readyState)在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll("left")来检测这一状态,因为这条代码在DOM加载完毕之前执行时会抛出错误(throw an error)。(document文档正在加载时,返回"loading"。当文档结束渲染但在加载内嵌资源时,返回"interactive",并引发DOMContentLoaded事件。当文档加载完成时,返回"complete",并引发load事件。)

jquery写法:

$(document).ready(function() { // code... });// DOMContentLoaded

$(document).load(function() { // code... });// load

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值