js中页面加载完成后执行的几种方式及执行顺序

js和jquery使用中,经常用到在页面加载中或者之后进行一些方法请求 或者属性的添加。大致有五种(有的只是书写方式不一样)三类:

第一类:  jquery的$(function{ })   <第一种>     和 jquery的$(document).ready(function(){})  <第二种>   两种方法并没本质的区别 第一种是第二种的简写方式 这类是document加载完成后就执行方法。

第二类: jquery的  $(window).load(function(){})   <第三种>    使用window.onload  = function(){} <第四种>      第三种和第四种都是等到整个window加载完成执行方法体。两者一个使用jquery对象,一个使用dom对象

第三类: 在标签上静态绑定onload事件 <body  onload="chufa()">  等待body加载完成就会执行 chufa()方法

这五种三类的执行先后顺序是怎么样的??

通过简单的代码验证:

    发现方法一  与方法二  无论放在哪个位置  总是优于其他三种方式执行(原因:这两种方式是在document加载完成后就执行,后三种是等到整个window页面加载完成后才执行) 这两种的执行顺序是谁在上方谁优先。

    方法三和方法四  总是优先于第五种方法执行  执行顺序也是根据谁在上方谁优先执行。

   方法五  总是最后执行。                                                                                                欢迎各位指出不足之处。

<script type='text/javascript'>
        $(function(){
        alert("jquery=====document jquery  第一种");
        });


        $(window).load(function(){
          alert("jquery ===== window load 第三种");
        });

        function chufa(){
          alert("静态标签  ===== onload  第五种");
        }

         window.onload = function(){
          alert("window.onload =====onload  第四种");
         }
         
         $(document).ready(function(){
           alert("jquery =====  document  第二种");
         });
 </script>

<body  onload="chufa()">
    </body>

  

 

posted on 2018-12-03 17:02  骅鸿  阅读(3541)  评论(0编辑  收藏  举报