文档加载执行顺序

最新推荐文章于 2023-02-14 22:31:33 发布

Inuyasha1121

最新推荐文章于 2023-02-14 22:31:33 发布

阅读量1.7k

点赞数 1

分类专栏：文档加载顺序初始化文章标签：文档加载顺序

本文链接：https://blog.csdn.net/Inuyasha1121/article/details/45695477

版权

文档加载顺序同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

初始化

2 篇文章 0 订阅

订阅专栏

<script>
    alert('script1');
    
    $(document).ready(function(){
        alert('$(document).ready()1-1'); 
        $(document).ready(function(){ 
            alert('$(document).ready()1-2'); 
        });
    });
    
    $(window).load(function(){ 
        alert('$(window).load()1'); 
    });
</script>
<script> 
    $(document).ready(function(){ 
        alert('$(document).ready()2-1'); 
        $(document).ready(function(){ 
            alert('$(document).ready()2-2'); 
        }); 
    }); 
    
    alert('script2'); 
    
    $(window).load(function(){ 
        alert('$(window).load()2'); 
    }); 
</script>
<script> 
    alert('script3'); 
    
    document.onreadystatechange = function(){ 
        alert('onreadystatechange:'+document.readyState); 
    }
</script>
<script> 
    window.onload = function(){ 
        alert('window.onloadfunction1'); 
    } 
    
    window.onload = function(){ 
        alert('window.onloadfunction2'); 
    }
    
    function a(){
        alert('a');
    }
    function b(){
        alert('b');
    }
</script>
……
<body οnlοad="a(),b()">

以上代码在ff下的执行结果：

script1 -> script2 -> script3 -> onreadystatechange:interactive ->$(document).ready()1-1 -> $(document).ready()2-1 ->$(document).ready()1-2 -> $(document).ready()2-2 -> onreadystatechange:complete -> $(window).load()1 -> $(window).load()2 -> window.onloadfunction2 -> body-onload -a -> body-onload- b

总结：

1.如果<script>块中有裸代码，会在文档未加载时就首先执行，每个<script>块按代码书写位置顺序执行。

2.裸代码执行完毕后，文档得以加载DOM并形成DOM树，状态发生改变为interactive，jQuery的文档就绪函数$(document).ready()（可简写成$(function(){})）得以执行，有多个并且其内在无ready()嵌套时按书写位置顺序执行，若有嵌套则先按顺序执行外层，外层都执行完毕后从头返回内层按顺序执行。

3.当$(document).ready()全部执行完毕后，文档内的媒体文件接着加载，当所有的内容 ( 包括窗口、框架、对象和图像等 )完全加载完毕时，状态变为complete。

4.js的onload()函数在直接赋值代码的情况下：

window.onload = alert('window.onload1');
window.onload = alert('window.onload2');
window.onload = functionname();

可以写多个且都会执行，与<script>块中裸代码地位相同都按书写顺序执行；

若赋值函数（写法为以下两种时：window.οnlοad=function(){} 或 window.οnlοad=functionname;（注意函数名不带括号）），则在文档完全加载完后，状态变为complete后执行，且如果有多个onload，只会执行最后一个：

<script>
window.onload = function(){
    alert('window.onloadfunction1');
}
window.onload = function(){
    alert('window.onloadfunction2');
}
window.onload = functionname;
</script>

若直接在body元素中给onload事件赋值，则只会执行body的onload事件中赋值的函数，可赋值多个函数用 , 或 ; 分隔，按书写顺序执行，输出window.onloadfunction2 -> a -> b ：

<script>
window.onload = function(){
    alert('window.onloadfunction1');
}
window.onload = function(){
    alert('window.onloadfunction2');
}

function a(){
    alert('a');
}
function b(){
    alert('b');
}
</script>
……
<body οnlοad="a(),b()">

5.由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完，例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 $(window).load()方法。此方法会在元素的 onload 事件中绑定一个处理函数，如果处理函数绑定给 window 对象，则会在文档所有内容加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发，$(window).load()函数可以写多个，按书写位置顺序执行。

Jquery 代码如下：

$(window).load(function (){
	// 编写代码
});

等价于 JavaScript 中的：

window.onload = function(){
	// 编写代码
}

6.除了$(window).load()方法，js中也有等效的addLoadEvent()函数：

function addLoadEvent(func){  
  var oldοnlοad=window.onload;  
  if(typeof window.onload!='function'){  
     window.οnlοad=func;    
  }else{  
    window.οnlοad=function(){  
      oldonload();  
      func();    
    }  
  }  
}

function a(){……}
function b(){……}
function c(){……}

addLoadEvent(a);
addLoadEvent(b);
addLoadEvent(c);

相当于：

window.onload = function(){
    a();
    b();
    c();
}

当js文件内部要使用onload事件时，可以使用addLoadEvent()代替，以免当一个文档调用多个写有onload事件的js文件时发生冲突。

7.除了$(window).load()方法，js的addLoadEvent()函数以外，还可以使用事件监听，当某一事件被触发时需要执行某个函数，在IE下可用attachEvent，在FF下则要用addEventListener：

if (navigator.userAgent.indexOf("MSIE")>0){//IE中
    window.attachEvent('onload',函数名);//函数名不要带括号
}else{
    window.addEventListener('load',函数名,false);//注意这里的事件不带"on"前缀，第三个参数为在哪一个阶段捕获事件，若为true则是捕获阶段，若为false则是冒泡阶段
}

使用addEventListener()绑定的函数在事件发生后执行，这里要晚于赋值window.onload本身的函数执行。