domcontentloaded ajax,Ajax优化(1) — DOMContentLoaded

很久没有来百度空间看看了,一直忙武林三国游戏, 这款webgame目前已经进入收尾阶段, 今天来到这儿,突然觉得留下点什么比较好, 呵呵.. ..

想了想, 就取了"Ajax优化"这个题目, 将一系列同行们可能没有用到 or 没有注意 or 发现但没有去处理的细节记录下来.

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);

附:

文件名称：DOMContentLoaded.js

function onContent(f){

var a = onContent,

b = navigator.userAgent,

d = document,

w = window,

c = "onContent",

e = "addEventListener",

o = "opera",

r = "readyState",

s = "");

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);

};