load事件可以安全的执行JS,因为该事件是在页面完全加载完后才开始执行(包括页面内的图片、flash等所有元素),不会因为JS需要对某个DOM操作,而页面还没有加载该节点而引起错误。但是这种安全是需要付出代价的:如果某些图片(或者一些别的东西)加载特别慢,那么load事件会等到很久之后才会触发。
针对这个问题,一些JS框架提供了一些补充方法。如:jquery的$(document).ready()、mootools的domready事件。都是在页面的DOM加载完毕后立即执行,而不需要等待漫长的图片下载过程。
如果不使用这些框架,怎样实现自己的 document ready呢?请看以下一段代码:
具体的调用方法:
针对这个问题,一些JS框架提供了一些补充方法。如:jquery的$(document).ready()、mootools的domready事件。都是在页面的DOM加载完毕后立即执行,而不需要等待漫长的图片下载过程。
如果不使用这些框架,怎样实现自己的 document ready呢?请看以下一段代码:
function __clear(timer){
clearTimeout(timer);
clearInterval(timer);
return null;
};
function __attach_event(evt, callback) {
if (window.addEventListener) {
window.addEventListener(evt, callback, false);
} else if (window.attachEvent) {
window.attachEvent("on" + evt, callback);
}
}
function __domReady(f) {
// 假如 DOM 已经加载,马上执行函数
if (__domReady.done) return f();
// 假如我们已经增加了一个函数
if (__domReady.timer) {
// 把它加入待执行函数清单中
__domReady.ready.push(f);
} else {
// 为页面加载完毕绑定一个事件,
// 以防它最先完成。使用addEvent(该函数见下一章)。
__attach_event("load", __isDOMReady);
// 初始化待执行函数的数组
__domReady.ready = [f];
// 尽可能快地检查DOM是否已可用
__domReady.timer = setInterval(__isDOMReady, 100);
}
}
function __isDOMReady() {
// 如果我们能判断出DOM已可用,忽略
if (__domReady.done) return false;
// 检查若干函数和元素是否可用
if (document && document.getElementsByTagName && document.getElementById && document.body) {
// 如果可用,我们可以停止检查
__clear(__domReady.timer);
__domReady.timer = null;
// 执行所有正等待的函数
for ( var i = 0; i < __domReady.ready.length; i++ ) {
__domReady.ready[i]();
}
// 记录我们在此已经完成
__domReady.ready = null;
__domReady.done = true;
}
}
具体的调用方法:
__domReady(function() {
alert("The dom is loaded!");
});