DOMContentLoaded事件

今天查看百度空间源代码，发现多了个util.js文件，打开看看。里面里面定义了addDOMLoadEvent。这是干什么用的？

仔细查看代码，发现在Mozilla添加了DOMContentLoaded事件，这个在以前一直没有用过。                    if (document.addEventListener)
                       
document.addEventListener("DOMContentLoaded", init, false);

好久就是为了兼容实现DOMContentLoaded事件。

网上找了点有关DOMContentLoaded的资料拿来看看。

DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。
   
与DOM中的onLoad事件与其相近。但onload要等到所有页面元素加载完成才会触发, 包括页面上的图片等等。
    如果页面的图片很多的话,
从用户访问到onload触发可能需要较长的时间, 而在Ajax运用中, 常常需要在onload中加入许多初始化的动作, 如果由于网络问题引起的图片加载过慢(
见: Ajax优化(2) -- lazierLoad img && js), 则必然影响用户的体验。
   
在这种情况下firefox的DOMContentLoaded事件, 恰恰是我们需要的。

目前,跨平台的DOMContentLoaded的解决方案有很多, 比如jQuery, Prototype...等等, 其实现原理大同小异.

在项目中, 我使用了Prototype工具, 以往调用初始化的方法是:

Event.observe(window,
"load", init);

现在有了DOMContentLoaded, 可以替换成如下的方法:

document.observe('contentloaded',
init);

最新的prototype中自定义事件已经重新命名, 使用"dom:loaded" 代替了 “contentloaded”.

document.observe('dom:loaded',
init);

附:
   Andrea Giammarchi
的OnContent函数提供了一个跨平台的DOMContentLoaded的解决方案My DOMContentLoaded
Final Solution

文件名称：DOMContentLoaded.js

function onContent ( f ) {

var a = onContent,

b = navigator . userAgent ,

d = document ,

w = window ,

c = "onContent" ,

e = "addEventListener" ,

o = "opera" ,

r = "readyState" ,

s = "<scr" . concat ( "ipt defer src='//:' on" ,
r, "change='if(this." ,
r, "==\"complete\"){this.parentNode.removeChild(this);"
, c, "." , c, "()}'></scr" , "ipt>" ) ;

a[ c] = ( function ( o) {

return function ( ) {

a[ c] = function ( ) { } ;

for ( a = arguments . callee ; ! a. done; a. done = 1) f( o ? o( ) : o)

}

} ) ( a[ c] ) ;

if ( d[ e ] ) d[ e ] ( "DOMContentLoaded" , a[ c] , false ) ;

if ( / WebKit| Khtml/ i. test ( b) | | ( w[ o] & & parseInt ( w[ o] . version ( ) ) < 9) ) ( function ( ) { / loaded | complete / . test ( d[ r] ) ? a[ c] ( ) : setTimeout ( arguments . callee , 1)

} ) ( ) ;

else if ( / MSIE/ i. test ( b) ) d. write ( s) ;

1. } ;

util.js：

addDOMLoadEvent = (function(){
        // create event function
stack
        var load_events = [],
            load_timer,
           
script,
            done,
            exec,
           
old_onload,
            init = function () {
                done =
true;
                // kill the timer
               
clearInterval(load_timer);

// execute each function in the stack in the order they were
added
                while (exec =
load_events.shift())
                    setTimeout(exec,
10);
                if (script) script.onreadystatechange =
'';
            };

return function (func) {
                // if the init
function was already ran, just run this function now and stop
               
if (done) return func();

if (!load_events[0]) {
                    // for
Mozilla/Opera9
                    if
(document.addEventListener)
                       
document.addEventListener("DOMContentLoaded", init, false);

// for Internet Explorer

/*@cc_on @*/
                    /*@if
(@_win32)
                        document.write("<script id=__ie_onload
defer src=//0><\/scr"+"ipt>");
                        script =
document.getElementById("__ie_onload");
                       
script.onreadystatechange = function() {
                            if
(this.readyState == "complete")
                                init(); //
call the onload handler
                        };
                   
/*@end @*/

// for Safari
                    if
(/WebKit/i.test(navigator.userAgent)) { // sniff
                       
load_timer = setInterval(function() {
                            if
(/loaded|complete/.test(document.readyState))
                               
init(); // call the onload handler
                        },
10);
                    }

// for other browsers set the window.onload, but also
execute the old window.onload
                    old_onload =
window.onload;

window.onload = function() {
                       
init();
                        if (old_onload)
old_onload();
                    };
                }

load_events.push(func);
        }
})();

function insertWBR(string, step){
    var textarea =
document.createElement('TEXTAREA');
    textarea.innerHTML =
string.replace(/</g,"&lt;").replace(/>/g,"&gt;");
    string =
textarea.value;

var step = (step || 5), reg = new RegExp("(\\S {" + step + "})",
"gi");
    return
string.replace(/(<[^>]+>)/gi,"$1<wbr/>").replace(/(>|^)([^<]+)(<|$)/gi,
function(a,b,c,d){
        if(c.length < step) return a;
        return
b + c.replace(reg, "$1<wbr/>") + d;
    });
}