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

来源:互联网 发布:javascript函数 编辑:程序博客网 时间:2024/05/01 18:40

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

    针对这个问题,一些JS框架提供了一些补充方法。如:jquery的$(document).ready()、mootools的domready事件。都是在页面的DOM加载完毕后立即执行,而不需要等待漫长的图片下载过程。

    如果不使用这些框架,怎样实现自己的 document ready呢?请看以下一段代码:
Javascript代码 
1.    function __clear(timer){ 
2.        clearTimeout(timer); 
3.        clearInterval(timer); 
4.        return null; 
5.    }; 
6.     
7.    function __attach_event(evt, callback) { 
8.        if (window.addEventListener) { 
9.            window.addEventListener(evt, callback, false);  
10.        } else if (window.attachEvent) { 
11.            window.attachEvent("on" + evt, callback); 
12.        } 
13.    } 
14.     
15.    function __domReady(f) { 
16.        // 假如 DOM 已经加载,马上执行函数 
17.        if (__domReady.done) return f(); 
18.        // 假如我们已经增加了一个函数 
19.        if (__domReady.timer) { 
20.            // 把它加入待执行函数清单中 
21.            __domReady.ready.push(f); 
22.        } else { 
23.            // 为页面加载完毕绑定一个事件, 
24.            // 以防它最先完成。使用addEvent(该函数见下一章)。 
25.            __attach_event("load", __isDOMReady); 
26.            // 初始化待执行函数的数组 
27.            __domReady.ready = [f]; 
28.            // 尽可能快地检查DOM是否已可用 
29.            __domReady.timer = setInterval(__isDOMReady, 100); 
30.        } 
31.    } 
32.    function __isDOMReady() { 
33.        // 如果我们能判断出DOM已可用,忽略 
34.        if (__domReady.done) return false; 
35.        // 检查若干函数和元素是否可用 
36.        if (document && document.getElementsByTagName && document.getElementById && document.body) { 
37.            // 如果可用,我们可以停止检查 
38.            __clear(__domReady.timer); 
39.            __domReady.timer = null; 
40.            // 执行所有正等待的函数 
41.            for ( var i = 0; i < __domReady.ready.length; i++ ) { 
42.                __domReady.ready[i](); 
43.            } 
44.            // 记录我们在此已经完成 
45.            __domReady.ready = null; 
46.            __domReady.done = true; 
47.        } 
48.    } 

具体的调用方法:
Javascript代码
1.    __domReady(function() { 
2.        alert("The dom is loaded!"); 
3.    });