js常見執行方法window.onload = function (){},$(document).ready()


1. window.onload = function(){};

當頁面DOM對象加載完畢,web瀏覽器能夠運行JS時,此方法即被觸發。

2. $(document).ready();
當web頁面以及其附帶的資源文件,如CSS,Scripts,圖片等,加載完畢后執行此方法。
常用於檢測頁面(及其附帶資源)是否加載完畢。 

總而言之,他們的調用順序是window.onload = function(){}; >> $(document).ready(); ,測試代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jquery立即執行函數</title>
  <script src="jquery.min.js"></script>
</head>
<body>
<script>
  $(document).ready(function () {
    console.log("ready");
  });
  window.onload = function () {
    console.log("onload");
  };
</script>
</body>
</html>

 

測試結果如下:

 

 

 

區別:

1.執行時間
        window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行。
        $(document).ready()是DOM結構繪制完畢后就執行,不必等到加載完畢。

2.編寫個數不同
         window.onload不能同時編寫多個,如果有多個window.onload方法,只會執行一個
         $(document).ready()可以同時編寫多個,並且都可以得到執行

3.簡化寫法
         window.onload沒有簡化寫法
         $(document).ready(function(){})可以簡寫成$(function(){});

以下代碼無法正確執行:

  window.onload = function(){
    alert("text");
  };
  window.onload = function(){
    alert("text");
  };

 

結果只輸出第二個 

$(document).ready()能同時編寫多個
以下代碼正確執行:

  $(document).ready(function(){
    alert("Hello World");
  });
  $(document).ready(function(){
    alert("Hello again");
  });

 結果兩次都輸出  Hello World

 

另外,需要注意一點,由於在 $(document).ready() 方法內注冊的事件,只要 DOM 就緒就會被執行,因此可能此時元素的關聯文件未下載完。例如與圖片有關的 html 下載完畢,並且已經解析為 DOM 樹了,但很有可能圖片還沒有加載完畢,所以例如圖片的高度和寬度這樣的屬性此時不一定有效。要解決這個問題,可以使用 Jquery 中另一個關於頁面加載的方法 ---load() 方法。 Load() 方法會在元素的 onload 事件中綁定一個處理函數。如果處理函數綁定給 window 對象,則會在所有內容 ( 包括窗口、框架、對象和圖像等 ) 加載完畢后觸發,如果處理函數綁定在元素上,則會在元素的內容加載完畢后觸發。
Jquery 代碼如下:
$(window).load(function (){
       // 編寫代碼 
});

等價於 JavaScript 中的以下代碼
Window.onload = function (){
     // 編寫代碼
}

——————————————————————————————

最近在改一個嵌入在frame中的頁面的時候,使用了jquery做效果,而頁面本身也綁定了onload事件。改完后,Firefox下測試正常流暢,IE下就要等個十幾秒jquery的效果才出現,黃花菜都涼了。

  起初以為是和本身onload加載的方法沖突。網上普遍的說法是$(document).ready()是在頁面DOM解析完成后執行,而 onload事件是在所有資源都准備完成之后才執行,也就是說$(document).ready()是要在onload之前執行的,尤其當頁面圖片較大 較多的時候,這個時間差可能更大。可是我這頁面分明是圖片都顯示出來十幾秒了,還不見jquery的效果出來。

  刪了onload加載的方法試試,結果還是一樣,看來沒有必要把原本的onload事件綁定也改用$(document).ready()來 寫。那是什么原因使得Firefox正常而IE就能呢?接着調試,發現IE下原來綁定的onload方法竟然先於$(document).ready() 的內容執行,而Firefox則是先執行$(document).ready()的內容,再執行原來的onload方法。這個和網上的說法似乎不完全一致 啊,呵呵,有點意思,好像越來越接近真相了。

  翻翻jquery的源碼看看$(document).ready()是如何實現的吧:

  if (jQuery.browser.msie && window == top) (function () {
    if (jQuery.isReady) return;
    try {
      document.documentElement.doScroll("left");
    } catch (error) {
      setTimeout(arguments.callee, 0);
      return;
    }
    // and execute any waiting functions
    jQuery.ready();
  })();
  jQuery.event.add(window, "load", jQuery.ready);

 

結果很明了了,IE只有在頁面不是嵌入frame中的情況下才和Firefox等一樣,先執行$(document).ready()的內容,再執 行原來的onload方法。對於嵌入frame中的頁面,也只是綁定在load事件上執行,所以自然是在原來的onload綁定的方法執行之后才輪到。而 這個頁面中正好在測試環境下有一個訪問不到的資源,那十幾秒的延遲正是它放大出的時間差。

 

    $(function(){
        alert(0);
    });
    $(document).ready(function(){
        alert(1)
    });
    (function ($) {
        alert(2);
    })(jQuery);
    $().ready(function() {
        alert(3)
    });

 


免責聲明!

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



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