模拟DOMContentLoaded事件

window.onload事件

文档中所有图片，脚本，链接以及子框完成加载后，才会触发window.onload事件。

浏览器兼容性：All

DOMContentLoaded事件

当页面中的文档树解析完成时，Document会触发DOMContentLoaded事件。此时，页面引用的样式表和图像文件，以及包含的框架页面可能还没有加载完成。

浏览器兼容性：Chrome 0.2+ , Firefox 1.0+, IE9+, Opera 9.0+, Safari 3.1+

模拟DOMContentLoaded

用户可等不及，文档全部加载完才可以与页面交互，这样的交互体验也是极差的，那对于不支持DOMContentLoaded的浏览器，我们只能来模拟了！

第一种方案：

 /*
 document.readyState 四种状态

 uninitialized: 尚未开始加载
 loading: 正在加载
 interactive: 已加载了必需内容
 complete: 文档加载完成
 */
 function DomContentLoaded(){
     if(document.readyState === 'complete'){
         document.detachEvent("onreadystatechange", DOMContentLoaded);
         //DOMContentLoaded触发，执行绑定的事件
     }
 };

 document.attatchEvent("onreadystatechange", DOMContentLoaded);

第二种方案：

 /*
 当前页面如果是顶层窗口，可以每隔1ms模拟点击滚动条，直到不再抛出异常
 判断页面是否包含在firame中的方法：
 if(window.self === window.top){
     //当前页面是父页面
 }
 下面是jQuery的判断方法，又学会了一招(●'◡'●)
 */
 var toplevel = false;
 try{
     //判断当前页面是否包含在iframe中
     topleve = window.iframeElement == null;
 }catch(e){}

 function doScrollCheck(){
     try{
         document.documentElement.doScroll('left');
     }catch(e){
         setTimeout(doScrollCheck, 1);
     }
 }
 if(document.documentElement.doScroll && toplevel){
     doScrollCheck();
 }

当页面内容较多或包含iframe时，模拟滚动条点击会比onreadystatechange先触发，因此jQuery 1.7.1中，结合了这两种方法来模拟DOMContentLoaded事件。