jQuery利用 window.noload()等 EventHandler戴完 html與圖片等組件後才執行語法，主要是避免 JavaScript未戴入元素而使發生錯誤。
1-頁面戴入後執行
當 document 物件下所有 DOM 物件都可以正確取得時，就會觸發 jQuery.ready()註冊的 function，這時雖然後 <img src="…" /> 定義的圖片正在下載，但由於 <img> 這個 DOM 物件已經都 ready 了，所以 jQuery 並不會等圖片全部下載完畢才執行 ready 事件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | jQuery(document).ready(function(){ //處理的內容 }) //可簡寫成 $(document).ready(function(){ //處理的內容 }); //也可簡寫成 $(function(){ //處理的內容 }); //另外的寫法 jQuery(function($){ //處理的內容 }); |
1-1-頁面戴入後執行範例
1 2 3 | $(function() { alert("ready event!"); }); |
2-頁面載入完之前執行
而使用 window 的 load 事件，卻是完全不同的行為， jQuery 裡的 window 的 load 事件與 JavaScript 裡的 window.onload 事件一模一樣，註冊在這裡面的事件都會等到整個視窗裡所有資源都已經全部下載後才會執行，例如該頁面有 100 張圖片就會等 100 圖片都下載完才會執行，其中也包括所有 iframe 子頁面的內容必須完整載入。
1 2 3 4 5 6 7 8 | jQuery(window).load(function() { //處理的內容 }); //也可簡寫寫成 $(window).load(function() { //處理的內容 }); |
2-1-頁面載入完之前執行範例
1 2 3 | $(window).load(function() { alert("load event!"); }); |
alert 是指彈出訊息
jQuery API文件上有提到一段 .ready()與 window.onload不相容的注意事項：
The .ready() method is generally incompatible with the <body onload=""> attribute. If load must be used, either do not use .ready() or use jQuery .load() method to attach load event handlers to the window or to more specific items, like images.
解決方式：只要 $(document).ready() 在 window.onload 事件註冊之前就先定義好就沒有這個問題了！