[jQuery][筆記] jQuery(document).ready() 與 jQuery(window).load()

對jQuery還是一個新手的我，這篇文章需要好好的讀上幾遍，節錄保哥的文章重點以免忘掉。

節錄：保哥的文章 使用 jQuery(document).ready() 與 window.onload 注意事項

基本上在 JavaScript 的 DOM 物件層級中，document 物件是隸屬於 windows 物件 ( document == window.document )，首先先介紹 jQuery(document).ready() 與 jQuery(window).load() 的差異，而這兩者的差別說明如下：

• jQuery(document).ready(function() { … }) 《  或簡寫為 $(function() { … });  》
• 當 document 物件下所有 DOM 物件都可以正確取得時，就會觸發 jQuery.ready() 註冊的 function，這時雖然後 定義的圖片正在下載，但由於 這個 DOM 物件已經都 ready 了，所以 jQuery 並不會等圖片全部下載完畢才執行 ready 事件。
• jQuery(window).load(function() { … })
• 而使用 window 的 load 事件，卻是完全不同的行為，jQuery 裡的 window 的 load 事件與 JavaScript 裡的 window.onload 事件一模一樣，註冊在這裡面的事件都會等到整個視窗裡所有資源都已經全部下載後才會執行，例如該頁面有 100 張圖片就會等 100 圖片都下載完才會執行，其中也包括所有 iframe 子頁面的內容必須完整載入。

jQuery API 文件上只有說 jQuery(document).ready() 與 jQuery(window).load()「不相容」，但卻沒有說「哪裡不相容與何時會發生問題」，只有說「不要一起使用而以」。

原因如下：

只要在註冊 window.onload 事件後才使用 $(document).ready() 就會導致 $(document).ready() 變的與 $(window).load() 的行為一樣，要等到網頁所有資源都下載完畢才會執行 $(document).ready() 中註冊的事件！

Q：jQuery(document).ready() 與 jQuery(window).load()是否能一起使用呢？

A：只要 $(document).ready() 在 window.onload 事件註冊之前就先定義好就沒有這個問題了！