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

DOMContentLoaded和onload

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

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

相关推荐

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

    4. 混合使用readyState、DOMContentLoaded和onload事件 由于不同的事件触发时机不同,我们可以结合使用它们来实现更复杂的加载完成检测。例如,我们可以在interactive或complete状态下同步执行回调函数,而在页面的...

    js之onload事件的一点使用心得

    首先,必须明确的是,window.onload和window.load并非只是简单的页面加载完成时的事件触发器。具体到window.onload,它的作用是当整个网页(包括所有相关资源如图片、样式表等)加载完成后再执行指定的代码。这意味...

    各浏览器对link标签onload/onreadystatechange事件支持的差异分析

    在网页开发中,link标签常用于引入CSS样式表,而onload和onreadystatechange事件则用于检测样式表是否已经加载完成。然而,不同的浏览器对这两个事件的支持情况存在差异,这可能会导致在不同浏览器上的表现不一致。...

    页面中body onload 和 [removed] 冲突的问题的解决

    这时,`body.onload` 和 `window.onload` 事件就显得尤为重要。然而,当这两个事件同时存在时,可能会出现冲突,导致代码执行顺序混乱或只执行其中一个事件。本文将详细探讨这个问题,并提供解决方案。 `body....

    IE中图片的onload事件无效问题和解决方法

    此外,如果需要在所有浏览器中保持一致的行为,还可以考虑使用`window.onload`或`document.DOMContentLoaded`事件来确保在所有图片加载完毕后再执行后续操作。但请注意,这些全局事件可能会影响整个页面的加载时机,...

    jQuery中的read和JavaScript中的onload函数的区别

    总结来说,JavaScript的window.onload和jQuery的$(document).ready()在处理页面加载完毕时的事件触发时机上有所不同。开发者在选择使用哪一个方法时需要根据实际情况和性能需求做出决定。对于需要页面完全加载后再...

    js onload处理html页面加载之后的事件

    此外,window.onload与DOMContentLoaded事件也是有区别的。window.onload关注的是整个页面完全加载完毕,包括样式表、图片、脚本等资源。而DOMContentLoaded事件则只需要DOM结构加载完毕后就会触发,这个时间点通常...

    js 某个页面监听事件渲染完毕的时间.docx

    `window.onload`和`DOMContentLoaded`是两个关键的事件,用于监听页面加载的不同阶段。它们各自有其应用场景和优势。 首先,`window.onload`事件是在整个页面(包括HTML、CSS、JavaScript、图片和其他外部资源)...

    解析页面加载与js函数的执行 onload or ready

    在JavaScript函数的执行时机上,主要分为两种方式,即使用onload和ready。 onload事件: onload事件会在页面的所有资源(包括图片、脚本、样式表、图片等)完全加载并渲染完成之后触发。因此,如果页面上有大尺寸的...

    仅img元素创建后不添加到文档中会执行onload事件的解决方法

    总结来说,要避免未添加到文档中的`<img>`元素提前触发`onload`事件,关键在于控制图片加载的时机和顺序。通过以上方法,开发者可以更好地管理图片资源,优化网页性能,同时确保事件按照预期顺序正确执行。

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

    描述中提到了window.onload事件与DOMContentLoaded事件的区别。window.onload事件是等整个页面完全加载完成后才会触发,这包括所有图片、脚本、样式表、iframe等资源,通常会较晚触发,而DOMContentLoaded仅需DOM树...

    js 某个页面监听事件渲染完毕的时间.pdf

    JavaScript页面渲染完毕时间的监听是前端开发者不可或缺...通过合理选择和使用`window.onload`、`$(document).ready`或`DOMContentLoaded`事件,我们可以确保在正确的时间执行必要的操作,从而提升网页的性能和交互性。

    Jquery知识点一 Jquery的ready和Dom的onload的区别

    在处理DOM时,我们经常需要等待DOM完全加载完毕后才能进行操作,这时就涉及到`jQuery`的`ready`方法和浏览器原生的`DOM.onload`事件。 `jQuery.ready`方法,通常简写为`$(document).ready`,其主要功能是在DOM准备...

    前端项目-domready.zip

    这比等待window.onload事件更快,因为它不会等待图片和其他非DOM资源。 ```javascript document.addEventListener('DOMContentLoaded', function() { // DOM已加载完成,可以执行在此依赖DOM的操作 }); ``` 2. **...

    littlepjs-document-onload-dc-web-120919

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

    somepjs-document-onload-dc-web-102819

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

    addonload:添加多个[removed]函数的简单函数

    3. **事件监听**:如`window.onload`或`DOMContentLoaded`事件,可以确保在文档加载完成后执行特定的函数。 4. **模块打包工具**:像Webpack和Rollup这样的工具,可以将多个模块打包成一个或多个文件,便于管理和...

    在DOM加载完成时运行的代码,可以这样写:

    总结来说,确保代码在DOM加载完成后再执行是网页开发中的基础实践,可以利用jQuery的`$(document).ready()`或者原生JavaScript的`DOMContentLoaded`和`window.onload`事件来实现这一目标。正确使用这些方法可以优化...

    images.rar J S教学新手

    7. **DOMContentLoaded和window.onload**: - 两个事件用于确保页面加载完成后再执行脚本。 - 区别在于DOMContentLoaded仅等待DOM结构加载,而window.onload还需等待所有资源(如图片)加载完毕。 8. **jQuery库*...

    offsetHeight在OnLoad中获取为0的现象

    在其他浏览器中,通常使用 `addEventListener` 监听 `DOMContentLoaded` 或 `window.onload` 事件来确保元素已经完全加载并计算尺寸。 总的来说,`offsetHeight` 在 `onload` 事件中获取为 0 主要是因为浮动布局...

Global site tag (gtag.js) - Google Analytics