实例对比window.onload与$(document).ready
jQuery中的$(document).ready与JavaScript中的window.onload类似，都是在页面加载后执行指定的操作。但是两者也是有区别的。
1 $(document).ready与window.onload执行的时机不同
$(document).ready在页面框架加载完成后就被执行，而window.onload需要等页面的所有资源都被加载后才开始执行。
演示实例1
实验1 新建页面ready.htm，包含以下代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>ready实例</title>
<script language="javascript" type="text/javascript" src="Jscript/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert("Hello,World!");
});
</script>
</head>
<body>
<div class="divContent">
<img src="Images/img01.jpg" alt="美女"/>
<img src="Images/img02.jpg" alt="美女"/>
<img src="Images/img03.jpg" alt="美女"/>
<img src="Images/img04.jpg" alt="美女"/>
...(省略很多)
</div>
</body>
</html>
实验2 新建onload.htm，包含以下代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>onload实例</title>
<script type="text/javascript">
window.onload = function () {
alert("Hello,World!");
};
</script>
</head>
<body>
<img src="Images/img01.jpg" alt="美女"/>
<img src="Images/img02.jpg" alt="美女"/>
<img src="Images/img03.jpg" alt="美女"/>
<img src="Images/img04.jpg" alt="美女"/>
...(省略很多)
</body>
</html>
查看效果
使用chrome执行实验1和实验2的文件，都会加载图片和弹出提示对话框，但是实验1的提示对话框明显比实验2的提示对话框出现的稍早，当加载的图片越多这种现象越明显。（效果见下图）
2 $(document).ready与window.onload被重复多次时
$(document).ready与window.onload都可以被重复多次，但是两者的执行结果却不相同。$(document).ready重复多次时，每次执行结果不同，而window.onload重复多次时，仅输出最后一次的结果。
演示实例2
实验3 修改页面ready.htm，包含以下代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>ready实例</title>
<script language="javascript" type="text/javascript" src="Jscript/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert("Hello,World!");
});
$(document).ready(function () {
alert("Hello,Sun!");
});
$(document).ready(function () {
alert("Hello,Moon!");
});
</script>
</head>
<body>
</body>
</html>
实验4 修改onload.htm，包含以下代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>onload实例</title>
<script type="text/javascript">
window.onload = function () {
alert("Hello,World!");
};
window.onload = function () {
alert("Hello,Sun!");
};
window.onload = function () {
alert("Hello,Sun!");
};
</script>
</head>
<body>
</body>
</html>
查看效果
执行实验3的页面文件，会弹出3个对话框，分别显示"Hello,World!"，"Hello,Sun!"，"Hello,Sun!"。而执行实验4的页面文件，仅弹出一个对话框，显示"Hello,Sun!"。
3 使用$(function(){})代替$(document).ready(function (){})
$(function(){})是$(document).ready(function (){})的简写，可以使用它来代替$(document).ready(function (){})。