DOMContentLoaded事件解析

DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。    与DOM中的onLoad事件与其相近。但onload要等到所有页面元素加载完成才会触发, 包括页面上的图片等等。 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 而在Ajax运用中, 常常需要在onload中加入许多初始化的动作, 如果由于网络问题引起     的图片加载过慢( 见: Ajax优化(2) -lazierLoad img && js), 则必然影响用户的体验。在这种情况下firefox的DOMContentLoaded事件, 恰恰是我们需要的。目前,跨平台的DOMContentLoaded的解决方案有很多, 比如jQuery, Prototype...等等, 其实现原理大同小异.

      过去,当一个页面完成加载时,初始化脚本的方法是使用load事件,但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发. domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是如何在document对象中被触发的;document.addeventListener(‘DOMContentLoaded‘,function(){...},false);值得注意的是,这个网站的行为层可以被更快速地启动,这意味着用户可以更快开始浏览网站,这对于连接速度慢的网络或者包含大量图片并需要一些时间加载图片的网页来说特别重要,如果只想在所有资源都完成加载之后运行脚本, 那么仍然可以使用load.

时间: 2024-12-24 02:56:20

DOMContentLoaded事件解析的相关文章

模拟DOMContentLoaded事件

window.load事件 文档中所有图片,脚本,链接以及子框完成加载后,才会触发window.onload事件. 浏览器兼容性:All DOMContentLoaded事件 当页面中的文档树解析完成时,Document会触发DOMContentLoaded事件.此时,页面引用的样式表和图像文件,以及包含的框架页面可能还没有加载完成. 浏览器兼容性:Chrome 0.2+ , Firefox 1.0+, IE9+, Opera 9.0+, Safari 3.1+ 模拟DOMContentLoad

onload 事件、DOMContentLoaded事件、DOM加载顺序

1.onload 事件 定义与语法 onload事件会在页面或者图像加载完成后立即发生. 法:onload="SomeJavaScriptCode“: 参数:SomeJavaScriptCode    描述:必需.规定该事件发生时执行的 JavaScript. 支持该事件的 HTML 标签:<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

DOMContentLoaded事件&lt;zz&gt;

今天查看百度空间源代码,发现多了个util.js文件,打开看看.里面里面定义了addDOMLoadEvent.这是干什么用的? 仔细查看代码,发现在Mozilla添加了DOMContentLoaded事件,这个在以前一直没有用过.                    if (document.addEventListener)                        document.addEventListener("DOMContentLoaded", init, fals

DOMContentLoaded事件

今天查看百度空间源代码,发现多了个util.js文件,打开看看.里面里面定义了addDOMLoadEvent.这是干什么用的? 仔细查看代码,发现在Mozilla添加了DOMContentLoaded事件,这个在以前一直没有用过.                    if (document.addEventListener)                        document.addEventListener("DOMContentLoaded", init, fals

DOMContentLoaded 事件

DOMContentLoaded 事件 字面上看,它会在dom加载完成后触发. 与window.onload事件非常相似,但有一定区别: DOMContentLoaded 事件是在文档完全加载和解析之后触发: window.onload 事件不但文档完全加载和解析完毕,相关资源都要加载完毕,比如图片和CSS文件等: 下一个问题是什么时候dom加载完毕,这得从浏览器渲染说起,浏览器显示网页的过程可以做如下描述: 1.   请求得到html文档,根据文档请求更多的img,css及其它资源文件: 2.

JS/CSS/IMG加载顺序关系之DOMContentLoaded事件

DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在"所有的DOM全部加载完毕并且JS加载执行后触发". 但如果"js是通过动态加载进来的话,是不会影响到DOMContentLoaded的触发时间" 如下图所示,蓝色的线代表DOMContentLoaded开始触发,但前提是JS已经加载完毕并执行了. (仅仅是DOM 并不是onload事件整个页面全部加载完毕触发,DOMContentLoaded比onload要早触发 请区

25.Unity3D手机中Input类touch详解-Unity触屏事件解析到底(Twisted Fate)

首先贴一下Unity支持的模型文件类型,以前没有收集过. Unity支持两种类型的3D文件格式: 1.  通用的"出口型"3D文件 如.fbx..dae..3ds..dxf..obj等文件格式. 2.  3D软件专用的3D文件格式 如Max, Maya, Blender,Cinema4D, Modo, Lightwave & Cheetah3D 等软件所支持的格式,如.MAX, .MB, .MA等等. Unity3D手机中Input类touch详解: 1.Input.touch

HTML5-常见的事件- DOMContentLoaded事件

一般我们监听文档是否加载完成是使用 window的load事件,该事件会在页面中的一切加载完毕时触发,但这个过程可能会因为要加载的外部资源过多而等待时间过长. DOMContentLoaded事件:则在形成完整DOM树之后就会触发,不理会图像.JavaScript文件.CSS文件或其他资源是否已经下载完成. DOMContentLoaded :好处就是可以在页面下载早起就可以添加事件处理程序,这样意味着用户能够尽早地与页面进行交互. 添加DOMContentLoaded事件如下: EventUt

深入理解Javascript封装DOMContentLoaded事件

最近在写一个Javascript的框架,刚把DOMContentLoaded事件封装好,略带小兴奋,把开发过程中遇到的原理和兼容性问题做篇笔记,省的忘记到处找. 我们在写js代码的时候,一般都会添加window.onload事件,主要是为了在DOM加载完后可以使用getElementById,getElementsByTagName等方法选取DOM元素进行操作,但是window.load会等到加载完DOM.脚本.CSS,最后加载完图片甚至是iframe中的所有资源才会触发,很多时候网页的图片较多