Dom加载

zidanezhicong 楼主

当大家使用window.onload执行一个函数时，必须要等到页面上的图片等信息全部加载完毕之后才执行的。但很多时候图片的数量比较多，所以需要很多时间下载。更令人尴尬的是，当网页文档（或者说Dom）已经加载完毕,而图片尚未加载完毕，很多用户已经开始浏览网页，但这时很多由window.onload所触发的函数不能执行，这就导致一部分功能不能完美地给用户使用，更严重的是会给用户留下不好的印象！

现在，我们来研究一下如何解决这个问题，解决方法就是在DOM加载完毕之后就执行程序。

先介绍两个人。一，jquery的作者：John Resig；二，javascript的世界级大师：dean edwards。（大家要记住这两位天才！）

jquery里有专门解决DOM加载的函数$(document).ready()（简写就是$(fn)），非常好用！John Resig在《Pro JavaScript Techniques》里，有这样一个方法处理DOM加载，原理就是通过document&& document.getElementsByTagName &&document.getElementById&& document.body 去判断Dom树是否加载完毕。代码如下：

1. function domReady( f ) {
   
2. // 如果DOM加载完毕，马上执行函数
   
3. if ( domReady.done ) return f();   
   
4. // 假如我们已增加一个函数
   
5. if ( domReady.timer ) {
   
6. // 把它加入待执行的函数清单中
   
7. domReady.ready.push( f );
   
8. } else {
   
9. // 为页面加载完成绑定一个事件,
   
10. // 为防止它最先完成. 使用 addEvent（下面列出）.
    
11. addEvent( window, “load”, isDOMReady );   
    
12. // 初始化待执行的函数的数组
    
13. domReady.ready = [ f ];   
    
14. // 经可能快地检查Dom是否已可用
    
15. domReady.timer = setInterval( isDOMReady, 13 );
    
16. }
    
17. }  
    
18. // 检查Dom是否已可操作
    
19. function isDOMReady() {
    
20. // 假如已检查出Dom已可用, 忽略
    
21. if ( domReady.done ) return false;   
    
22. // 检查若干函数和元素是否可用
    
23. if ( document &&  document.getElementsByTagName &&  document.getElementById &&  document.body ) {   
    
24. // 假如可用, 停止检查
    
25. clearInterval( domReady.timer );
    
26. domReady.timer = null;   
    
27. // 执行所有等待的函数
    
28. for ( var i = 0; i < domReady.ready.length; i++ )
    
29. domReady.ready[i]();   
    
30. // 记录在此已经完成
    
31. domReady.ready = null;
    
32. domReady.done = true;
    
33. }
    
34. }
    
35. 
    
36. // 由 Dean Edwards 在2005 所编写addEvent/removeEvent,
    
37. // 由 Tino Zijdel整理
    
38. // http://dean.edwards.name/weblog/2005/10/add-event/
    
39. //优点是1.可以在所有浏览器工作；
    
40. //2.this指向当前元素；
    
41. //3.综合了所有浏览器防止默认行为和阻止事件冒泡的的函数
    
42. //缺点就是仅在冒泡阶段工作
    
43. function addEvent(element, type, handler) {
    
44.         // assign each event handler a unique ID
    
45.         if (!handler.$$guid) handler.$$guid = addEvent.guid++;
    
46.         // create a hash table of event types for the element
    
47.         if (!element.events) element.events = {};
    
48.         // create a hash table of event handlers for each element/event pair
    
49.         var handlers = element.events[type];
    
50.         if (!handlers) {
    
51.                 handlers = element.events[type] = {};
    
52.                 // store the existing event handler (if there is one)
    
53.                 if (element["on" + type]) {
    
54.                         handlers[0] = element["on" + type];
    
55.                 }
    
56.         }
    
57.         // store the event handler in the hash table
    
58.         handlers[handler.$$guid] = handler;
    
59.         // assign a global event handler to do all the work
    
60.         element["on" + type] = handleEvent;
    
61. };
    
62. // a counter used to create unique IDs
    
63. addEvent.guid = 1;
    
64. 
    
65. function removeEvent(element, type, handler) {
    
66.         // delete the event handler from the hash table
    
67.         if (element.events && element.events[type]) {
    
68.                 delete element.events[type][handler.$$guid];
    
69.         }
    
70. };
    
71. 
    
72. function handleEvent(event) {
    
73.         var returnValue = true;
    
74.         // grab the event object (IE uses a global event object)
    
75.         event = event || fixEvent(window.event);
    
76.         // get a reference to the hash table of event handlers
    
77.         var handlers = this.events[event.type];
    
78.         // execute each event handler
    
79.         for (var i in handlers) {
    
80.                 this.$$handleEvent = handlers[i];
    
81.                 if (this.$$handleEvent(event) === false) {
    
82.                         returnValue = false;
    
83.                 }
    
84.         }
    
85.         return returnValue;
    
86. };
    
87. 
    
88. function fixEvent(event) {
    
89.         // add W3C standard event methods
    
90.         event.preventDefault = fixEvent.preventDefault;
    
91.         event.stopPropagation = fixEvent.stopPropagation;
    
92.         return event;
    
93. };
    
94. fixEvent.preventDefault = function() {
    
95.         this.returnValue = false;
    
96. };
    
97. fixEvent.stopPropagation = function() {
    
98.         this.cancelBubble = true;
    
99. };

复制代码

[ 本帖最后由 zidanezhicong 于 2008-5-8 08:46 编辑 ]

zidanezhicong 楼主

还有一个估计由几个外国大师合作写的，实现同样功能。

1. /*
   
2. * (c)2006 Jesse Skinner/Dean Edwards/Matthias Miller/John Resig
   
3. * Special thanks to Dan Webb's domready.js Prototype extension
   
4. * and Simon Willison's addLoadEvent
   
5. *
   
6. * For more info, see:
   
7. * http://www.thefutureoftheweb.com/blog/adddomloadevent
   
8. * http://dean.edwards.name/weblog/2006/06/again/
   
9. * http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
   
10. * http://simon.incutio.com/archive/2004/05/26/addLoadEvent
    
11. *
    
12. *
    
13. * To use: call addDOMLoadEvent one or more times with functions, ie:
    
14. *
    
15. *    function something() {
    
16. *       // do something
    
17. *    }
    
18. *    addDOMLoadEvent(something);
    
19. *
    
20. *    addDOMLoadEvent(function() {
    
21. *        // do other stuff
    
22. *    });
    
23. *
    
24. */
    
25. 
    
26. addDOMLoadEvent = (function(){
    
27.     // create event function stack
    
28.     var load_events = [],
    
29.         load_timer,
    
30.         script,
    
31.         done,
    
32.         exec,
    
33.         old_onload,
    
34.         init = function () {
    
35.             done = true;
    
36. 
    
37.             // kill the timer
    
38.             clearInterval(load_timer);
    
39. 
    
40.             // execute each function in the stack in the order they were added
    
41.             while (exec = load_events.shift())
    
42.                 exec();
    
43. 
    
44.             if (script) script.onreadystatechange = '';
    
45.         };
    
46. 
    
47.     return function (func) {
    
48.         // if the init function was already ran, just run this function now and stop
    
49.         if (done) return func();
    
50. 
    
51.         if (!load_events[0]) {
    
52.             // for Mozilla/Opera9
    
53.             if (document.addEventListener)
    
54.                 document.addEventListener("DOMContentLoaded", init, false);
    
55. 
    
56.             // for Internet Explorer
    
57.             /*@cc_on @*/
    
58.             /*@if (@_win32)
    
59.                 document.write("<script id=__ie_onload defer src=//0><\/scr"+"ipt>");
    
60.                 script = document.getElementById("__ie_onload");
    
61.                 script.onreadystatechange = function() {
    
62.                     if (this.readyState == "complete")
    
63.                         init(); // call the onload handler
    
64.                 };
    
65.             /*@end @*/
    
66. 
    
67.             // for Safari
    
68.             if (/WebKit/i.test(navigator.userAgent)) { // sniff
    
69.                 load_timer = setInterval(function() {
    
70.                     if (/loaded|complete/.test(document.readyState))
    
71.                         init(); // call the onload handler
    
72.                 }, 10);
    
73.             }
    
74. 
    
75.             // for other browsers set the window.onload, but also execute the old window.onload
    
76.             old_onload = window.onload;
    
77.             window.onload = function() {
    
78.                 init();
    
79.                 if (old_onload) old_onload();
    
80.             };
    
81.         }
    
82. 
    
83.         load_events.push(func);
    
84.     }
    
85. })();

复制代码

[ 本帖最后由 zidanezhicong 于 2008-5-8 08:54 编辑 ]

xilao

还是不明白，能否说详细一些。用到哪个部位

iid0019

标记下！！

kl19872

研究下..

kyukoi

标记下,有时间研究

resun

做个标记，很有用的知识。

walkingp

这是一篇好文章。

KarasCanvas

mark, 是该抽时间研究一下了..

abccome

拜读一下

wtcsy

额
以前一直在找这个
今天终于找到了
mark下..............

feigege

推荐John Resig的《精通Javascript》，里面讲解的很详细

baula84

  支持顶一下。