在jQuery中，要做到"等网页载入后再执行"，我们有两种选择
$(document).ready(fn)
与 $(window).load(fn)
二者的差别在于：
$(document).ready(fn)发生在"网页本身的HTML"载入后就触发，
$(window).load(fn)则会等到"网页HTML标签中引用的图档、内嵌物件(如Flash)、IFrame"等拉哩拉杂的东西都载入后才会触发。
一般来说，等网页全部元素都载入
才执行程式时机有点晚，因为在此之前，使用者已经可以点选操作网页，跳脱我们程式的掌控范围。因此，我们几乎都是将程式放
在$(document).ready(function() { ... })中(即$(function() { … }))。
$(window).load(fn)适合执行一些要等待图档或元素全部载入才可进行的动作，例如:检查图档长宽。换句话说，上回的大图自动缩小
Script可以透过$(window).load(fn)改写得更简单，完全不用担心图档没下载完成时的特殊处理，算是一个很好的应用范例。
才执行程式时机有点晚，因为在此之前，使用者已经可以点选操作网页，跳脱我们程式的掌控范围。因此，我们几乎都是将程式放
在$(document).ready(function() { ... })中(即$(function() { … }))。
$(window).load(fn)适合执行一些要等待图档或元素全部载入才可进行的动作，例如:检查图档长宽。换句话说，上回的大图自动缩小
Script可以透过$(window).load(fn)改写得更简单，完全不用担心图档没下载完成时的特殊处理，算是一个很好的应用范例。
1
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
2
<
head
>
3
<
title
></
title
>
4
<
script
type
="text/javascript"
src
="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"
></
script
>
<
script
type
="text/javascript"
>
5
$(
function
() {
6
alert(
"
ready event!
"
);
7
});
8
$(window).load(
function
(){
9
alert(
"
load event!
"
);
10
});
11
</
script
>
12
</
head
>
13
<
body
>
14
<
img
src
="http://blender-archi.tuxfamily.org/images/Sky_angmap_4.jpg"
/>
15
</
body
>
16
</
html
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
2
<
head
>
3
<
title
></
title
>
4
<
script
type
="text/javascript"
src
="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"
></
script
>
<
script
type
="text/javascript"
>
5
$(
function
() {
6
alert(
"
ready event!
"
);
7
});
8
$(window).load(
function
(){
9
alert(
"
load event!
"
);
10
});
11
</
script
>
12
</
head
>
13
<
body
>
14
<
img
src
="http://blender-archi.tuxfamily.org/images/Sky_angmap_4.jpg"
/>
15
</
body
>
16
</
html
>
这样就行弹出ready event，，等待
Sky_angmap_4.jpg 加载完毕后才弹出
load event!