jQuery中document與window以及load與ready 區別詳解_jquery

用過JavaScript的童鞋，應該知道window對象和document對象，也應該聽說過load事件和ready事件，小菜當然也知道，而且自認為很了解，直到最近出了問題，才知道事情並不是那麼簡單。

首先說說window和document，直觀上來講，window代表的是瀏覽器窗口，而document代表的是瀏覽器窗口中加載的dom元素，進一步說，document是window的一個屬性，window是最頂級的對象。

二者有啥差別呢？很好理解，假設現在有一個瀏覽器，裡邊加載的頁面特別長，已經超出了一屏，當然，肯定會出現滾動條了，這時候，$(window).height()和$(document). height()是不相等的，document的高度一定比window的大，因為window視窗總是那麼大。見下圖：

再說說load事件和ready事件(這裡的load和ready是指jQuery的事件，下同)。

先說load，load事件主要就是用來取代原生的window.onload，它只能用在兩個場景下：

· window物件上。如$(window).load(fn);。

· 有URL的元素(images, scripts, frames, iframes)。如$(“img”).load(fn);。

除此之外，任何元素都沒有load事件，例如：$(document).load(fn);這是錯誤的寫法，完全不會執行。

load事件需要頁面完全加載完成才可以觸發，所謂的完全加載完，不僅僅是dom結構加載完，還需要所有的鏈接引用都加載完才可以。例如頁面中有大量圖片，必須等每一個圖片都載入完成，才叫完全載入完。

最重要的還沒說，jQuery官方文件明確說明load事件的跨瀏覽器相容性很差(It doesn't work consistently nor reliably cross-browser)。經過小菜測試，Google瀏覽器僅支援$(window).load(fn);，而火狐瀏覽器支援$(window).load(fn);和$(“img”).load(fn);。

所以，除非必要情況下，否則強烈不建議使用load事件。

最後說ready，ready事件可以加在任意元素上，例如$(window).ready(fn);、$(document).ready(fn);、$(“div”).ready(fn );等等。

ready事件不要求頁面完全載入完，只需要載入完dom結構即可觸發。

ready事件可以同時註冊多個，執行時，依照註冊的先後順序執行。注意，就算是註冊不同元素的ready事件，也是依照先後順序執行。例如下列程式碼：

複製程式碼 程式碼如下:

$(window).ready(function(){
  alert("window");
});
$(document).ready(function(){
  alert("document");
});
$("div").ready(function(){
  alert("div");
});

按照常理，應該是div先加載完，所以先執行alert("div");，然後才是alert("document");或alert("window");，但遺憾的是，alert( "div");是最後一個執行的。所以，無論是否在同一元素上註冊ready事件，都是依照註冊的先後順序執行。

最後一項，ready事件與window.onload(或

)是衝突的，如果使用了window.onload(或)，將導致ready事件不執行。

經過如此多的討論，最終證明：$(document).ready(fn);相容性、安全性是最好的，如果有此類需求，盡量採用這種方式。