`
darrenzhu
  • 浏览: 783874 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

DOMContentLoaded和onload

阅读更多
window的load事件会在页面中的一切都加载完毕时触发,但这个过程可能会因为要加载外部资源过多而颇费周折。而DOMContentLoaded事件则在形成完整的DOM树之后就会触发,不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕。与load事件不同,DOMContentLoaded支持在页面下载的早期添加事件处理程序,这也就意味着用户能够尽早地与页面进行交互。
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 而在Ajax运用中, 常常需要在onload中加入许多初始化的动作, 如果由于网络问题引起的图片加载过慢, 则必然影响用户的体验。

要处理DOMContentLoaded事件,可以为document或window添加相应的事件处理程序(尽管这个事件会冒泡到window,但它的目标实际上是document)。
分享到:
评论

相关推荐

    littlepjs-document-onload-dc-web-120919

    资源及其所有从属资源(包括CSS和JavaScript)完成加载后,将触发load事件 在本课程中,我们将重点介绍DOMContentLoaded 。 为什么DOMContentLoaded很重要? DOMContentLoaded事件是浏览器的内置方法,用于指示何时...

    somepjs-document-onload-dc-web-102819

    资源及其所有从属资源(包括CSS和JavaScript)完成加载后,将触发load事件 在本课程中,我们将重点介绍DOMContentLoaded 。 为什么DOMContentLoaded很重要? DOMContentLoaded事件是浏览器的内置方法,用于指示何时...

    fewpjs-document-onload-rcdd_202104_tur_few

    资源及其所有从属资源(包括CSS和JavaScript)完成加载后,将触发load事件 在本课程中,我们将重点介绍DOMContentLoaded 。 为什么DOMContentLoaded很重要? DOMContentLoaded事件是浏览器的内置方法,用于指示何时...

    WEB页面性能测试专业术语+页面性能测试指标采集方式

    LCP)、可交互时间(Time to Interactive,TTI)、DCL(DOMContentLoaded)、L(Onload)、界面显示速度 SI(Speed Index)、TBT(Total Blocking Time)【总阻塞时间】、FPS、CLS(Cumulative Layout Shift)【累积布局...

    基于javascript原生判断DOM是否加载完毕

    当 DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash onload 当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了 根据执行时DOM是否已经装载完毕来决定是...

    jQuery的ready方法详解

    jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是[removed]或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的,首先,我们来看jQuery的代码 代码如下: ...

    async与defer的区别

    async是异步执行,异步下载完毕后就会执行,不确保执行顺序,一定在 onload前,但不确定在 DOMContentLoaded事件的前或后 defer是延迟执行,在浏览器看起来的效果像是将脚本放在了 body后面一样(虽然按规范应该是在...

    JS DOMReady事件的六种实现方法总结

    为了解决这个问题,ff中便增加了一个DOMContentLoaded方法,与onload相比,该方法触发的时间更早,它是在页面的DOM内容加载完成后即触发,而无需等待其他资源的加载。 Webkit引擎从版本525(Webkit nightly 1/2008

    一些主流JS框架中DOMReady事件的实现小结

    为了解决这个问题,ff中便增加了一个DOMContentLoaded方法,与onload相比,该 方法触发的时间更早,它是在页面的DOM内容加载完成后即触发,而无需等待其他资源的加载。Webkit引擎从版本525(Webkit nightly 1/2008:...

    提取jquery的ready()方法单独使用示例

    大家可以使用windows.onload事件,但onload在看来,就是页面上的东西(img,iframe等资源)全部都加载完毕后才能发生,如果页面内有大的图片的话,会在页面展现后好久时间后才执行。 如果只需要对DOM进行操作,那么...

    jQuery的ready方法实现原理分析

    jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是[removed]或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的,首先,我们来看jQuery的代码 ...

    mutaprophylaxis:防止未经授权的DOM突变的方法

    预防接种Mutaprophylaxis( :/ ˌ... 如果您等待onload或DOMContentLoaded ,那么保护该节点可能为时已晚,因为恶意脚本或附加组件可能已经安装到该节点上。用法预防突变旨在保护节点,使其免受与网站交互的恶意脚本

Global site tag (gtag.js) - Google Analytics