JavaScript实现jQuery 事件$(document).ready(function)方法

泡在网上的日子 / 文 发表于2012-06-27 11:04 次阅读 JavaScript

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

function() { 

    alert("The dom is loaded!"); 
}

作为一个参数传递给__domReady(),这种用法在jquery里面是很常见的。

收藏 赞 (0) 踩 (0)
上一篇:实现一个网络杂志风格的下拉导航菜单
原文出处 http://designshack.net/articles/javascript/code-a-web-magazine-style-dropdown-navigation-menu/ 效果图: 前端开发 已经成为一个非常受欢迎的职位。用像jQuery这样的扩展插件,越来越多的网页设计师开始创建出色的动画和网页特效。前端正创造着
下一篇:构建自己的JavaScript模板小引擎
有时候,我们不需要太牛逼太强大的JavaScript模板引擎(比如jQuery tmpl或者handlebarsjs),我们只是需要在简单的模板里绑定一些非常简单的字段,本文将使用非常简单的技巧来帮你实现这个小功能。 首先我们先来定义我们需要的模板,在id为template的script