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)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js">
</script>
<script type="text/javascript">
$(function() {
alert("ready event!");
});
$(window).load(function() {
alert("load event!");
});
</script>
</head>
<body>
<img src="http://blender-archi.tuxfamily.org/images/Sky_angmap_4.jpg" />
</body>
</html>
一般來說，等網頁全部元素都載入才執行程式時機有點晚，因為在此之前，使用者已經可以點選操作網頁，跳脫我們程式的掌控範圍。因此，我們幾乎都是將程式放在$(document).read(function() { ... })中(即$(function() { … }))。
$(window).load(fn)適合執行一些要等待圖檔或元素全部載入才可進行的動作，例如: 檢查圖檔長寬。換句話說，上回的大圖自動縮小Script可以透過$(window).load(fn)改寫得更簡單，完全不用擔心圖檔沒下載完成時的特殊處理，算是一個很好的應用範例。
function GM_wait() {
if(typeof unsafeWindow.jQuery == 'undefined')
window.setTimeout(GM_wait,100);
else
{
$ = unsafeWindow.jQuery;
$(window).load(resizeHugeImage);
}
}
GM_wait();
// All your GM code must be inside this function
function resizeHugeImage() {
$("img").each(function() {
var img = $(this);
var w = img.width(), h = img.height();
var longSide = (w > h ? w : h);
//...以下省略...