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

最新推荐文章于 2023-03-09 08:44:00 发布

三五月儿

最新推荐文章于 2023-03-09 08:44:00 发布

阅读量3.6k

点赞数

分类专栏： JavaScript JQuery 文章标签： ready onload jQuery JavaScript 页面加载

本文链接：https://blog.csdn.net/yl2isoft/article/details/17472157

版权

JavaScript 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

JQuery

17 篇文章 0 订阅

订阅专栏

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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实例对比window.onload与$(document).ready

jQuery中的$(document).ready与JavaScript中的window.onload类似，都是在页面加载后执行指定的操作。但是两者也是有区别的。1 $(document).ready与window.onload执行的时机不同$(document).ready在页面框架加载完成后就被执行，而window.onload需要等页面的所有资源都被加载后才开始执行。演示实例1
复制链接

扫一扫