论坛首页 Web前端技术论坛

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

浏览 5519 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-04-09  
    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!");
});
   发表时间:2008-08-22  
呵呵 这个东西好 谢谢 解决了我个问题
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics