Dom Ready 和 Dom Load 的区别

来源：互联网发布：宝矿力水特知乎编辑：程序博客网时间：2024/05/22 15:42

Dom Ready 和 Dom Load 的区别

页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。

一般情况下一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。

1. Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。
2. Dom Load 在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了

最常用的例子说明Dom Ready和Dom Load两者的区别
1. Dom Ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等
2. Dom Load是在整个document文档（包括了加载图片等其他信息）加载完成后就可以直接对dom进行操作，比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等；

思路：1.调用dom.ready时，先判断下dom是否ready了，如果dom已经ready,则直接执行函数，否则，推入readyList数组等待执行。

dom ready的学习

思路：1.调用dom.ready时，先判断下dom是否ready了，如果dom已经ready,则直接执行函数，否则，推入readyList数组等待执行。

2.判断domready，标准浏览器下，有document.DOMContentLoaded事件表明domready，而IE下，则通过doScroll来模拟，原理是在IE中，任何DOM元素都有一个doScroll 方法。当documentElement可以调用doScroll时，证明dom加载完成了。

判断domready的原理如上，但在实际应用中，我看到很多代码都是在进行上面的判断前，先判断document.readyState === 'complete'，在正美的http://www.cnblogs.com/rubylouvre/archive/2009/12/30/1635645.html这篇文章里，有列举了文档的加载顺序，列举的第3点不知能否解释上面的疑问，但我印象中好像readyState都是要在onreadystatechange里判断的。在下面的IE判断分支里，则有绑定了document的onreadystatechange事件进行判断。还有个疑问是在很多代码中，看到在执行doScroll时，先判断下是不是在iframe中，不是才调用。我想可能是因为执行到iframe里面时，dom应该都是加载完成的了吧，所以如果是在iframe中的话，就没有必要在进行doScroll判断了，纯属猜测。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
var dom = {
        isReady:false, //用于标识dom加载是否完成
        readyList: [],   //用于存放dom ready要执行的函数
         
        //用于当dom ready时，调用此函数依次执行存放在readyList里的函数
        fireReady:function(){
            if(this.isReady)return;
            this.isReady = true;
 
            if(this.readyList){
                var i = 0,readyFn;
                while(readyFn = this.readyList[i++]){
                    readyFn();
                }
                this.readyList.length = 0;  //执行到这里时，readyList数组则可以回收了，有人用this.readyList = undefined，也有人将this.readyList.length = 0，以标识此数组可回收。具体是怎样，我其实不知道，这里我选择将length清空的做法。
            }
        },
        ready:function(fn){
            if(this.isReady){
                return fn();  //这里，既然dom已经ready了，下面的代码就不需要执行了。所以直接执行函数并返回。
            }else{
                this.readyList.push(fn);
            }
 
            //不明白
            if(document.readyState === 'complete'){
                return this.fireReady();
            }
 
            if(document.addEventListener){ //标准浏览器
                document.addEventListener('DOMContentLoaded',function(){
                    document.removeEventListener('DOMContentLoaded',arguments.callee,false);
                    dom.fireReady();
                },false)
            }else{   //IE
                document.attachEvent('onreadystatechange',function(){
                    document.detachEvent('onreadystatechange',arguments.callee);
                    dom.fireReady();
                });
 
                (function(){
                    try{
                        document.documentElement.doScroll('left');
                    }catch(e){
                        setTimeout(arguments.callee,4);
                        return;
                    }
                    dom.fireReady();
                })();
            }
 
        }
    };
 
         
 
    dom.ready(function(){
        alert('domready1')
    })
    dom.ready(function(){
        alert('domready2')
    })
 
     
setTimeout(function(){
    dom.ready(function(){
        alert('延迟2秒，测试domready后的执行');
    });
}, 2000);