1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Dom页面加载完成</title> 6 </head> 7 <body> 8 <!-- 9 10 在实际应用中，我们经常会遇到这样的场景，当页面加载完成后去做一些事情：绑定事件、DOM操作某些结点等。 11 原来比较常用的是window的onload 事件，而该事件的实际效果是：当页面解析/DOM树建立完成，并完成了诸如图片、脚本、样式表甚至是iframe中所有资源的下载后才触发的。 12 这对于很多 实际的应用而言有点太“迟”了，比较影响用户体验。 13 为了解决这个问题，ff中便增加了一个DOMContentLoaded方法，与onload相比，该 方法触发的时间更早，它是在页面的DOM内容加载完成后即触发，而无需等待其他资源的加载。 14 Webkit引擎从版本525（Webkit nightly 1/2008:525+）开始也引入了该事件，Opera中也包含该方法。到目前为止主流的IE仍然没有要添加的意思。虽然IE下没有，但总是有解决办法 的，这篇文章对比了一下几大主流框架对于该事件的兼容性版本实现方案，涉及的框架包括： 15 1. Prototype 2. jQeury 3. moontools 4. dojo 5. yui 6. ext 16 最后总结各大框架的Polyfill方法，可以得到如下一个函数 17 18 --> 19 </body> 20 21 <script> 22 /* 23 *注册浏览器的DOMContentLoaded事件 24 *@param { Function } onready [必填]在DOMContentLoaded事件触发时需要执行的函数 25 *@param { Object } config [可选]配置项 26 */ 27 28 function onDOMContentLoaded(onready,config){ 29 //浏览器检测相关对象，在此为节省代码未实现，实际使用时需要实现。 30 //var Browser = {}; 31 //设置是否在FF下使用DOMContentLoaded（在FF2下的特定场景有Bug） 32 this.conf = { 33 enableMozDOMReady:true 34 }; 35 if( config ) 36 for( var p in config) 37 this.conf[p] = config[p]; 38 var isReady = false; 39 function doReady(){ 40 if( isReady ) return; 41 //确保onready只执行一次 42 isReady = true; 43 onready(); 44 } 45 /*IE*/ 46 if( Browser.ie ){ 47 (function(){ 48 if ( isReady ) return; 49 try { 50 document.documentElement.doScroll("left"); 51 } catch( error ) { 52 setTimeout( arguments.callee, 0 ); 53 return; 54 } 55 doReady(); 56 })(); 57 window.attachEvent('onload',doReady); 58 } 59 /*Webkit*/ 60 else if (Browser.webkit && Browser.version < 525){ 61 (function(){ 62 if( isReady ) return; 63 if (/loaded|complete/.test(document.readyState)) 64 doReady(); 65 else 66 setTimeout( arguments.callee, 0 ); 67 })(); 68 window.addEventListener('load',doReady,false); 69 } 70 /*FF Opera 高版webkit 其他*/ 71 else{ 72 if( !Browser.ff || Browser.version != 2 || this.conf.enableMozDOMReady) 73 document.addEventListener( "DOMContentLoaded", function(){ 74 document.removeEventListener( "DOMContentLoaded", arguments.callee, false ); 75 doReady(); 76 }, false ); 77 window.addEventListener('load',doReady,false); 78 } 79 } 80 81 82 83 84 </script> 85 </html>