转载

DOM ready原理

DOM ready 这个已经有很多人说了,说的也很详细,这里简单说下。利用问题的形式展开~

问:为什么需要 dom ready ?

答:我们需要在页面加载后,再进行一些js操作,例如:绑定事件,操作DOM。

问:为什么不用 window.onload 事件?

答: window.onload 要等页面内的所有资源都加载完才触发,像图片、音频等,等待的时间会比较长。

问:那直接用 DOMContentLoaded 就好,还墨迹这么多?

答: DOMContentLoaded 本来是 FireFox 的私有事件,FF3版本才完整支持, webkit 系列的在525版本后才增加这个事件的支持,IE系列的在IE9才开始支持。 可以看看它的兼容性,如下:

DOM ready原理

问:IE在不支持 DOMContentLoaded 事件的情况下,如何判断 DOM ready

  • 方法一:往页面内添加 script 标签,添加 defer 属性,通过监听这个脚本的 readyState ,当脚本加载完成时就判断 DOM ready 了。

    但这个方法的缺点是:当页面里有 iframe 的时候,会等 iframe 里所有的资源加载完才触发,和 onload 差不多。

  • 方法二:通过轮询来调用 document.documentElement.doScroll 方法,调用成功表示 DOM ready 了。

所以,IE下用方法二来判断 DOM ready

问: document.documentElement.doScroll 是个什么鬼?

答:IE下一些事件只有在DOM准备好后才能触发, document.documentElement.doScroll 就是这样一个事件。通过判断调用是否成功,进而判断DOM是否加载完。 这个hack最早是外国的大牛发现的,详情可以看 这里 。

问:IE的判断完了,那 webkit 系列的在525版本之前的怎么判断?

答:通过轮询判断 document.readyState ,当 readyStateloaded/complete 的时候,判断DOM加载完毕。

问:你说的我都懂,有没有什么现成的库?

答:基本上比较流行的库都有实现的,像 jQuery/Zepto/Prototype/Moontools/YUI 等,只是每个库实现的方式都不同。

github 上也有个比较出名的库 domready ,现在它的主分支是针对有 DOMContentLoaded 事件的浏览器,兼容性如下:

  • IE9+
  • Firefox 4+
  • Safari 3+
  • Chrome *
  • Opera *

不过它的 0.3.0 分支是兼容多种浏览器的,兼容性如下:

  • IE6+
  • Firefox 2+
  • Safari 3+
  • Chrome *
  • Opera *

最后

如果是用在移动端的话,可以放心的通过 DOMContentLoaded 事件来判断。PC的话,国内现在的环境,还是乖乖用兼容版本吧。

参考:

  • http://www.cnblogs.com/JulyZhang/archive/2011/02/12/1952484.html
正文到此结束
Loading...