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.