很久没有来百度空间看看了,一直忙武林三国游戏, 这款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);
};
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/229881.html原文链接：https://javaforall.net
