2012年2月14日 星期二

筆記:Javascript 的 window.onload 跟 jQuery 的 .ready() 有何不同


【程式菜鳥筆記】

Q: Javascript 的 window.onload 跟 jQuery 的 .ready() 有何不同?
A: 執行的時間點不同。前者較慢,後者較快。

-- 詳解 --

Javscript 的 window.onload (也就是 jQuery 的 .load() ),要在網頁的所有 assets ,包括圖檔,全部都載入完成後,才會執行。然而, jQuery 的 .ready() ,是一旦 DOM 建構完成,就會執行,不必等那些肥大的圖檔載入。

也就是說:用 $(documnt).ready(handler) 來執行「一開頁面要處理」的事情,他執行的時間點,可以比 $(documnt).load(handler) 提早很多。

若要用到 CSS 值的話,使用 jQuery 的 .ready() 時,要把 CSS 放在 .ready() 之前。若要用到載入的資源,例如圖檔尺寸的話,那麼,程式碼就只好放在 .load() 裡面,而不能放在 .ready() 裡面。

另,jQuery 的 .ready() 方法,跟 <body onload=""> 屬性,兩者基本上是不相容的。

參考資料:.ready() – jQuery API


本文剪輯自 Google Plus。原噗按這裡(在新分頁開啟)