JS原生方法实现jQuery的ready()

浏览器加载页面的顺序：

1、 解析HTML结构

2、 加载外部脚本和样式表文件

3、 解析并执行脚本代码

4、 构造HTML DOM模型==ready()

5、 加载图片等组件

6、 页面加载完毕==onload()

ready事件是在DOM模型构造完毕时触发

load事件是在页面加载完毕后触发

1. function ready(fn){
2. if(document.addEventListener) {
3. document.addEventListener('DOMContentLoaded', function() {
4. //注销事件, 避免反复触发
5. document.removeEventListener('DOMContentLoaded',arguments.callee, false);
6. fn(); //执行函数
7. }, false);
8. }else if(document.attachEvent) { //IE
9. document.attachEvent('onreadystatechange', function() {
10. if(document.readyState == 'complete') {
11. document.detachEvent('onreadystatechange', arguments.callee);
12. fn(); //函数执行
13. }
14. });
15. }
16. };

ready()加强版(自JavaScript权威指南)

1. /*
2. * 传递函数给whenReady()
3. * 当文档解析完毕且为操作准备就绪时，函数作为document的方法调用
4. */
5. var whenReady = (function() { //这个函数返回whenReady()函数
6. var funcs = []; //当获得事件时，要运行的函数
7. var ready = false; //当触发事件处理程序时,切换为true
9. //当文档就绪时,调用事件处理程序
10. function handler(e) {
11. if(ready) return; //确保事件处理程序只完整运行一次
13. //如果发生onreadystatechange事件，但其状态不是complete的话,那么文档尚未准备好
14. if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {
15. return;
16. }
18. //运行所有注册函数
19. //注意每次都要计算funcs.length
20. //以防这些函数的调用可能会导致注册更多的函数
21. for(var i=0; i<funcs.length; i++) {
22. funcs[i].call(document);
23. }
24. //事件处理函数完整执行,切换ready状态, 并移除所有函数
25. ready = true;
26. funcs = null;
27. }
28. //为接收到的任何事件注册处理程序
29. if(document.addEventListener) {
30. document.addEventListener('DOMContentLoaded', handler, false);
31. document.addEventListener('readystatechange', handler, false); //IE9+
32. window.addEventListener('load', handler, false);
33. }else if(document.attachEvent) {
34. document.attachEvent('onreadystatechange', handler);
35. window.attachEvent('onload', handler);
36. }
37. //返回whenReady()函数
38. return function whenReady(fn) {
39. if(ready) { fn.call(document); }
40. else { funcs.push(fn); }
41. }
42. })();
43.  
44. //--------------------- test -----
45. function t1() {
46. console.log('t1');
47. }
48. function t2() {
49. console.log('t2');
50. }
51.  
52. // t2-t1-t2
53. whenReady(t1);
54. t2();
55. whenReady(t2);