DOMContentLoaded与 onload的区别

1.DOMContentLoaded

DOMContentLoaded是FF,Opera 9的特有的Event, 当所有DOM解析完以后会触发这个事件。

 jquery的ready(示例:$("selector).ready(function(){})),MT的onDomReady

 IE下是scrollleft事件可以时就表示DomcontentLoaded: var temp= document.createElement('div');temp.doScroll('left');

 Fired on a Window object when a document's DOMcontent is finished loading, but unlike "load", does not wait untilall images are loaded. Used for example by GreaseMonkey to sneak in to alterpages before they are displayed.

This event, as many others on this page, is dispatched to"trusted" targets only; for example, it is not dispatched to thecontent of the main browser object in Firefox, even if it comes from a chrome:/URI.

一下是jQuery ，yui ，extjs 三个框架对domcontentloaded 的实现方式，请大家参考

1. function bindReady(){     
2.     if ( readyBound ) return;     
3.     readyBound = true;     
4.     
5.     // Mozilla, Opera and webkit nightlies currently support this event     
6.     if ( document.addEventListener ) {     
7.         // Use the handy event callback     
8.         document.addEventListener( "DOMContentLoaded", function(){     
9.             document.removeEventListener( "DOMContentLoaded", arguments.callee, false );     
10.             jQuery.ready();     
11.         }, false );     
12.     
13.     // If IE event model is used     
14.     } else if ( document.attachEvent ) {     
15.         // ensure firing before onload,     
16.         // maybe late but safe also for iframes     
17.         document.attachEvent("onreadystatechange", function(){     
18.             if ( document.readyState === "complete" ) {     
19.                 document.detachEvent( "onreadystatechange", arguments.callee );     
20.                 jQuery.ready();     
21.             }     
22.         });     
23.     
24.         // If IE and not an iframe     
25.         // continually check to see if the document is ready     
26.         if ( document.documentElement.doScroll && typeof window.frameElement === "undefined" ) 
27. (function(){     
28.             if ( jQuery.isReady ) return;     
29.     
30.             try {     
31.                 // If IE is used, use the trick by Diego Perini     
32.                 // http://javascript.nwbox.com/IEContentLoaded/     
33.                 document.documentElement.doScroll("left");     
34.             } catch( error ) {     
35.                 setTimeout( arguments.callee, 0 );     
36.                 return;     
37.             }     
38.     
39.             // and execute any waiting functions     
40.             jQuery.ready();     
41.         })();     
42.     }     
43.     
44.     // A fallback to window.onload, that will always work     
45.     jQuery.event.add( window, "load", jQuery.ready );     
46. }   

 

        YUI：

1. /*! DOMReady: based on work by: Dean Edwards/John Resig/Matthias Miller */    
2.     
3.         // Internet Explorer: use the readyState of a defered script.     
4.         // This isolates what appears to be a safe moment to manipulate     
5.         // the DOM prior to when the document's readyState suggests     
6.         // it is safe to do so.     
7.         if (EU.isIE) {     
8.     
9.             // Process onAvailable/onContentReady items when the     
10.             // DOM is ready.     
11.             YAHOO.util.Event.onDOMReady(     
12.                     YAHOO.util.Event._tryPreloadAttach,     
13.                     YAHOO.util.Event, true);     
14.     
15.             var n = document.createElement('p');      
16.    
17.             EU._dri = setInterval(function() {    
18.                 try {    
19.                     // throws an error if doc is not ready    
20.                     n.doScroll('left');    
21.                     clearInterval(EU._dri);    
22.                     EU._dri = null;    
23.                     EU._ready();    
24.                     n = null;    
25.                 } catch (ex) {    
26.                 }    
27.             }, EU.POLL_INTERVAL);     
28.    
29.         // The document's readyState in Safari currently will     
30.         // change to loaded/complete before images are loaded.     
31.         } else if (EU.webkit && EU.webkit < 525) {     
32.     
33.             EU._dri = setInterval(function() {     
34.                 var rs=document.readyState;     
35.                 if ("loaded" == rs || "complete" == rs) {     
36.                     clearInterval(EU._dri);     
37.                     EU._dri = null;     
38.                     EU._ready();     
39.                 }     
40.             }, EU.POLL_INTERVAL);      
41.     
42.         // FireFox and Opera: These browsers provide a event for this     
43.         // moment.  The latest WebKit releases now support this event.     
44.         } else {     
45.     
46.             EU._simpleAdd(document, "DOMContentLoaded", EU._ready);     
47.     
48.         }     
49.         /     
50.     
51.         EU._simpleAdd(window, "load", EU._load);     
52.         EU._simpleAdd(window, "unload", EU._unload);     
53.         EU._tryPreloadAttach();     
54.     })();  

 

        EXTJS：

1. function initDocReady(){     
2.     var COMPLETE = "complete";     
3.     
4.     docReadyEvent = new Ext.util.Event();     
5.     if (Ext.isGecko || Ext.isOpera) {     
6.         DOC.addEventListener(DOMCONTENTLOADED, fireDocReady, false);     
7.     } else if (Ext.isIE){     
8.         DOC.write("<S"+'CRIPT id=" + IEDEFERED + " src="/'+'/:" defer="defer"></S'+"CRIPT>");     
9.         DOC.getElementById(IEDEFERED).onreadystatechange = function(){     
10.         if(this.readyState == COMPLETE){     
11.             fireDocReady();     
12.         }     
13.         };     
14.     } else if (Ext.isWebKit){     
15.         docReadyProcId = setInterval(function(){     
16.         if(DOC.readyState == COMPLETE) {     
17.             fireDocReady();     
18.          }     
19.         }, 10);     
20.     }     
21.     // no matter what, make sure it fires on load     
22.     E.on(WINDOW, "load", fireDocReady);     
23. };    

 

 

总结各大主流框架的做法，写了以下这个版本。主要是尽量的做到优化并考虑到FF2下的Bug，提供一个是否使用DOMContentLoaded的开关配置。

 

1. /*    
2.  * 注册浏览器的DOMContentLoaded事件    
3.  * @param { Function } onready [必填]在DOMContentLoaded事件触发时需要执行的函数    
4.  * @param { Object } config [可选]配置项    
5.  */    
6. function onDOMContentLoaded(onready,config){     
7.     //浏览器检测相关对象，在此为节省代码未实现，实际使用时需要实现。     
8.     //var Browser = {};     
9.     //设置是否在FF下使用DOMContentLoaded（在FF2下的特定场景有Bug）     
10.     this.conf = {enableMozDOMReady:true};     
11.     if( config )     
12.     for( var p in config)     
13.         this.conf[p] = config[p];     
14.     
15.     var isReady = false;     
16.     function doReady(){     
17.         if( isReady ) return;     
18.         //确保onready只执行一次     
19.         isReady = true;     
20.         onready();     
21.     }     
22.     /*IE*/    
23.     if( Browser.ie ){     
24.         (function(){     
25.             if ( isReady ) return;     
26.             try {     
27.                 document.documentElement.doScroll("left");     
28.             } catch( error ) {     
29.                 setTimeout( arguments.callee, 0 );     
30.                 return;     
31.             }     
32.             doReady();     
33.         })();     
34.         window.attachEvent('onload',doReady);     
35.     }     
36.     /*Webkit*/    
37.     else if (Browser.webkit && Browser.version < 525){     
38.         (function(){     
39.             if( isReady ) return;     
40.             if (/loaded|complete/.test(document.readyState))     
41.                 doReady();     
42.             else    
43.                 setTimeout( arguments.callee, 0 );     
44.         })();     
45.         window.addEventListener('load',doReady,false);     
46.     }     
47.     /*FF Opera 高版webkit 其他*/    
48.     else{     
49.         if( !Browser.ff || Browser.version != 2 || this.conf.enableMozDOMReady)     
50.             document.addEventListener( "DOMContentLoaded", function(){     
51.                 document.removeEventListener( "DOMContentLoaded", arguments.callee, false );     
52.                 doReady();     
53.             }, false );     
54.         window.addEventListener('load',doReady,false);     
55.     }     
56.     
57. }   

2.Onload

 onload要等到所有页面元素加载完成才会触发, 包括页面上image、flash、iframe等内容都加载完毕才会执行。

 

另外 onload 是window 的事件 可以直接只用window.οnlοad=function(){}使用

        DomContentLoaded是document 上的事件续注册后使用 document.addEventListener('DomContentLoaded',function(){});