jquery $(document).ready() 與window.onload的區別

標籤：java   strong   c   javascript   檔案   html   

Jquery中$(document).ready()的作用類似於傳統JavaScript中的window.onload方法，不過與window.onload方法還是有區別的。

1.執行時間 

        window.onload必須等到頁面內包括圖片的所有元素載入完畢後才能執行。 
        $(document).ready()是DOM結構繪製完畢後就執行，不必等到載入完畢。 

2.編寫個數不同 

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

3.簡化寫法 

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

另外，需要注意一點，由於在$().ready()方法內註冊的時間，只要DOM就緒就會被執行，因此可能此時元素的關聯檔案未下載完。例如與圖片有關的html下載完畢。並且可能解析為DOM樹了，但很有可能圖片還沒有載入完畢，所以例片的高度和寬度這樣的屬性此時不一定有。

 

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