不冒任何險，什么也不會有，什么也不是。

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(){});

以下代碼無法正確執行：

結果只輸出第二個

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

另外，需要注意一點，由于在 $(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()是如何實現的吧：

結果很明了了，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)
    });

posted @ 2014-06-25 23:09 nd 閱讀(16286) 評論(0) 收藏舉報

刷新頁面返回頂部

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

公告