可以在某些场合替代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;
    }
}

具体的调用方法：

__domReady(function() {
    alert("The dom is loaded!");
});

评论

2 楼 blacklong 2012-08-23  

good，找了好几个，就你这个好使~~~

1 楼 esteem 2008-08-22  

呵呵 这个东西好 谢谢 解决了我个问题