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. });
- Mootools domReady事件 可以在某些场合替代onload事件
- 可以在某些场合替代onload事件的do…
- MooTools学习笔记(三)窗体事件domready
- onload 载入可以写多个事件
- onload事件
- onload事件
- onload事件
- 关于domReady事件的一点看法,domReady队列
- 如何绑定多个事件在 onload
- 在ContentPlaceHolder中注册onload事件
- jQuery DOMready 页面加载事件 研究
- window.onload和DOMReady
- domReady和onload
- mootools的鼠标移动事件
- 有用的onload事件
- js之onload事件
- iframe的onload事件
- HTML onload事件
- window的扩展及多彩世界
- 深入Android 【五】 —— 任务和进程
- 使用CRT调试内存分配堆来找出未释放的内存空间
- 房子----遥远的梦
- 深入Android 【六】 —— 界面构造
- Mootools domReady事件 可以在某些场合替代onload事件
- 深入Android【七】 —— 资源文件
- 在任务栏右下角填加图标
- 冒泡排序代码
- PUKOJ1080 Humman Gene Function
- 深入Android【八】 —— Activity间数据传输
- 获取LK9100数据线的端口号
- PKUOJ1159 Palindrome
- 删除目录