可以在某些场合替代onload事件的domReady事件

load事件可以安全的执行JS，因为该事件是在页面完全加载完后才开始执行（包括页面内的图片、flash等所有元素），不会因为JS需要对某个DOM操作，而页面还没有加载该节点而引起错误。但是这种安全是需要付出代价的：如果某些图片（或者一些别的东西）加载特别慢，那么load事件会等到很久之后才会触发。

针对这个问题，一些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;
    }
}

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!");
});