DOMContentLoaded与window.onload的区别当页面加载完成后，会触发window.onload事件。我们知道我们可以使用window.onload事件来触发并执行需要页面完全加载的执行。javascript脚本，但是如果页面包含很多样式文件、图片文件、子框架页面（iframe），onload事件会延迟到这些文件加载??完成。有时候并不是我们需要的，比如我们想知道从页面接受完成到dom树解析完成所需要的时间，那么onload事件就不合适了。这时候DOMContentLoaded就派上用场了，它的定义是：当页面文档加载解析完成后，立即触发DOMContentLoaded事件，无需等待样式文件、图片文件、子框架页面的加载。示例兼容性DOMContentLoaded目前支持所有主流浏览器，IE9以后也支持了，请问我可以用吗？如果要兼容IE，还需要两个额外的事件。在IE8中，可以使用readystatechange事件来监听DOM文档是否加载完毕。在早期的IE版本中，可以每隔一段时间通过try/catch执行document.documentElement.doScroll('left')来监听这个状态，因为这段代码会在DOM之前抛出错误（throwanerror）加载完成。根据上面的解释，我们可以写一个IE兼容的DOMContentLoaded事件from//ifIEfunctionIEContentLoaded(w,fn){vard=w.document,done=false,//只触发一次！完成）{完成=真；fn();}};//轮询无错误(function(){try{//抛出错误直到ondocumentreadyd.documentElement.doScroll('left');}catch(e){setTimeout(arguments.callee,50);return;}//没有错误，启动init();})();//尝试始终在加载之前触发d.onreadystatechange=function(){if(d.readyState=='complete'){d.onreadystatechange=null;在里面（）;}};}实验性分割线目前很多库都实现了兼容页面加载完成事件，大致思路是先判断document.readyState==='complete'是否为真，如果为真，直接执行脚本，否则绑定脚本到页面加载完成事件，然后根据文档是否有addEventListener来区分主流浏览器和IE浏览器？因为IE9及以后版本基本上和主流浏览器有相同的标准，所以主要用来区分IE8及以下版本。主流浏览器使用DOMContentLoaded+window.load，IE8及以下使用onreadystatechange+window.onload+doScroll这里要注意onreadstatechange事件是不可靠的。如果页面中有图片，可能会在onload事件之后触发。通常情况下，只有当页面不包含二进制资源或者资源很少或者有缓存时才能正确执行。作为替代函数domReady(fn){varready=false,top=false,doc=window.document,root=doc.documentElement,modern=doc.addEventListener,add=modern?'addEventListener':'attachEvent',del=modern?'removeEventListener':'detachEvent',pre=modern?'':'on',init=function(e){if(e.type==='readystatechange'&&doc.readyState!=='complete')返回；(e.type==='load'?window:doc)[del](pre+e.type,init,false);如果(!ready&&(ready=true))fn.call(window,e.type||e);},poll=function(){try{root.doScroll('left');}catch(e){setTimeout(拉,50);返回;}初始化（'民意调查'）;};如果（doc.readyState==='complete')fn.call(window,'lazy');else{if(!modern&&root.doScroll){try{top=!window.frameElement;}catch(e){}if(top)poll();}doc[add](pre+'DOMContentLoaded',init,false);doc[add](pre+'readystatechange',init,false);window[add](pre+'load',init,false);}}相关事件readystatechangeloadbeforeunloadunload展开jqueryready分析ContentedLoaded的IE兼容实现DOMReady，为什么doScroll更接近DOMContentLoaded
