jQuery ready vs load
在使用Javascript操作HTML DOM時,記得要養成網頁載入後才動手的好習慣,不然會有可怕的事發生… (可參考邊做邊學 jQeury 系列 3-jQuery 常用的 Javascript 技巧教學影片,在5分02秒的示範)
在jQuery中,要做到"等網頁載入後再執行",我們有兩種選擇:
$(document).ready(fn)與$(window).load(fn)
二者的差別在於$(document).ready(fn)發生在"網頁本身的HTML"載入後就觸發,而$(window).load(fn)則會等到"網頁HTML標籤中引用的圖檔、內嵌物件(如Flash)、IFrame"等拉哩拉雜的東西都載入後才會觸發。
我 寫了一段示範程式突顯二者的區別。由於Sky_angmap_4.jpg是一張1.2MB的大型圖檔,實際執行時,可以觀察到 “ready event!” –> 圖檔緩慢顯現 -> "load event!”的過程。(嫌下載時間太短,差別不夠明顯的話,可以試試Sky_angmap_7.jpg,XD)