这个事件是从HTML中的onLoad的延伸而来的,当一个页面完成加载时,初始化脚本的方法是使用load事件,但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发。
domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是如何在document对象中被触发的;
document.addeventListener('DOMContentLoaded',function(){...},false);
DOMContentLoaded 与 onload 的不同之处在于 DOMContentLoaded 发生在 DOM 加载完毕,但是图片等可能未加载完成的情况。DOMContentLoaded 被除IE外的浏览器支持。针对IE浏览器,也可以模拟这个事件,有两种方案
1、 在页面加一个标签
- <script src="//:" defer />
- <script type="text/javascript">
- //<![CDATA[
- var $ = document.getElementById;
- var fireDOMReadyEvent = function () {
- alert('DOM content loaded');
- }
- if (!!window.ActiveXObject) {
- // Internet Explorer use defer attribute
- var src = (window.location.protocol == 'https') ? '://0' : 'javascript:void(0)';
- document.write('<SCRIPT id=____dom_content_ready__ src="' + src + '" defer><\/script>');
- $('____dom_content_ready__').onreadystatechange = function() {
- if (this.readyState == 'complete') {
- this.onreadystatechange = null;
- fireDOMReadyEvent();
- }
- };
- }
- //]]>
- </script>
- <body>
- <img src="verybig.jpg">
- </body>
然后检测该脚本的 onreadystatechange,如果为 complete 说明此时 DOM 加载完毕,即 DOMContentLoaded 事件发生。 用 Http watch 工具可以看到像早些版本的 JQuery 和 ExtJS 都会发这么一个请求。最后再删除这个标签即可。一般这个请求花费几毫秒时间。
2、 通过setTiemout来不断的调用documentElement的doScroll方法,如果调用成功则相当 DOMContentLoaded 事件发生。
- <script type="text/javascript">
- //<![CDATA[
- var $ = document.getElementById;
- var fireDOMReadyEvent = function () {
- window.clearInterval(timer)
- alert('DOM content loaded');
- }
- if (!!window.ActiveXObject) {
- // Using doScroll method to instead of script tag to deal with DOM content loaded event
- var timer = null;
- try {
- timer = setInterval(function () {
- document.body.doScroll('left');
- fireDOMReadyEvent();
- });
- } catch(ex) {};
- }
- //]]>
- </script>
- <img src="verybig.jpg">