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>

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM