上午的時候,找個閒暇事件整理之前整理的一些關於jQuery的東西,看到了一個之前做的jQuery的$(document).ready()與window.onload()方法的比較。上面兩個方法最重要的區別在於：$(document).ready()的觸發實際是HTML的這棵DOM樹建建立的時候,就觸發了這個ready()函數的執行，但是windows.onload()方法則是在DOM樹建立之後，並且DOM中帶有URL屬性的元素都被加載到本地之後，纔會去執行。
說的簡單一點，就是一個頁面加載分成三個步驟：
1）瀏覽器接收到純文本的HTML
2）HTML根據XHTML的規則，將其解析成爲一個DOM樹
3）瀏覽器遍歷DOM中帶有再次請求信息的節點，例如image，通過這些節點上的信息，將遠程的資源獲取到本地（或者是從cache中獲取）
然後，經過瀏覽器的解析之後，你看到的就是整個頁面了。
其中，$(document).ready()方法的觸發時機是在第二步結束,而window.onload()方法的出發時機則是在第三步結束之後。
聯想到一個問題，如果我需要在document.ready()方法中，獲取圖像的大小應該怎麼辦呢？因爲ready()方法的觸發時機被人爲的提前了，帶來了很多好處，但是也必然存在類似這樣的弊端。jQuery還是考慮到了這樣的情況，並且做了相應的解決方案，在他的文檔裏面，有一個load()方法,就是用來解決這樣的問題。直接把代碼copy上來吧，注意onload方法適用於下面幾個對象：images、frames、scripts、window對象。
<span style="font-family:KaiTi_GB2312;font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("#image").load(function(){
alert($("#image").width());
});
})
</script>
</head>
<body>
<select multiple="multiple">
<option value="1">Oracle</option>
<option value="2">Java</option>
<option value="3">C++</option>
</select>
<img id="image"
src="http://t1.baidu.com/it/u=2624739849,4151443416&fm=32&picname=8441c36b01d987e6ca8054e6d69615f8.jpg">
</body>
</html>
</span>這就是jQuery提供了load()方法的主要考慮了。