今天查看百度空间源代码，发现多了个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)
;
- } ;
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,"<").replace(/>/g,">");
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;
});
}