实例对比window.onload与$(document).ready

来源：互联网发布：excel合并单元格数据编辑：程序博客网时间：2024/06/03 20:57

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 (){})。

0 0