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.