jQuery 中的 $(document).ready() 和 Window.onload 的区别 - 未分类

jQuery 中的 $(document).ready() 和 Window.onload 的区别

发布于 2018-01-14 字数 2754 浏览 1787 评论 0

在编写网页的时候,需要等到文档加载完毕才执行某些脚本动作,在 JavaScript 中有 window.onload 事件可以使用,在 jQuery 中有 $(document).ready() 可以使用,那么 jQuery 中的 $(document).ready()window.onload 的区别呢?

jQuery 中的 $(document).ready() 和 Window.onload 的区别

以浏览器装载文档为例,页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件,在常规的 JavaScript 代码中,通常使用 window.onload 方法,而在 jQuery 中,使用的是 $(document).ready() 方法。由于在 $(document).ready() 方法内注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完。

例如与图片有关的 HTML 下载完毕,并且已经解析为 DOM 树了,但很有可能图片还没有加载完毕,此时图片的高度和宽度不一定有效。要解决这个问题,可以使用 jQuery 中另一个关于页面加载的方法 load() 方法。load() 方法会在元素的onload 事件中绑定一个处理函数。

如果处理函数绑定给 window 对象,则会在所有内容,包括窗口、框架、对象和图像等加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。

下面给出 jQuery readywindow.onload 的区别

window.load $(document).ready()
执行时机 必须等待网页中所有的内容加载完毕后(包括图片)才能执行 网页中所有DOM结构绘制完毕后就执行,可以能DOM元素关联的内容并没有加载完
编写个数 不能同时编写多个
以下代码无法正确执行:

window.onload = function(){
    alert("caibaojian");
};
window.onload = function(){
    alert("caibaojian.com");
};

结果只输出第二个

能同时编写多个 以下代码正确执行:

$(document).ready(function(){
    alert("Hello Caibaojian");
});
$(document).ready(function(){
    alert("Hello caibaojian.com");
});

结果两次都输出

简化写法
$(function(){
// do something
});

jQuery 代码如下:

$(window).load(function(){
// 编写代码
});

等价于 JavaScript 中的以下代码

Window.onload = function(){
// 编写代码
}

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0