区别：window-onload和document-ready

最新推荐文章于 2024-07-02 15:03:05 发布
最新推荐文章于 2024-07-02 15:03:05 发布
阅读量212 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39039128/article/details/106060294
版权
本文解析了DOM树加载与完整页面资源加载的区别，强调document.ready与window.onload在网页开发中的应用时机，帮助开发者理解并合理利用这两者的特性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

document.ready 

Dom树加载完执行

window.onload

页面资源（比如图片、媒体资源,加载速度远慢于dom加载速度）加载完执行

 

document.ready比window.onload先执行

【js的window.onload和jquery的.ready()什么区别】
学无止境
02-24 949
【js的window.onload和jquery的.ready()什么区别】
window.onload和DOMContentLoaded的区别
skysys的研究小屋
08-13 3004
一、何时触发这两个事件？ 1、当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。 2、当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。 二、为什么要区分？ 开发中我们经常需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的。这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函
细说document.ready和window.onload
weixin_30853329的博客
07-02 393
原文 　　简书原文：https://www.jianshu.com/p/bbf28d61aa1f 大纲 　　1、对页面加载的认识　　2、关于document.ready()　　3、关于document.onload()　　4、document.ready和window.onload的区别　　5、为什么要使用document.ready()或者document.onload()　　6、docu...
document.ready和window.onload的区别
java 学习
03-18 179
页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）， 二是onload，指示页面包含图片等文件在内的所有元素都加载完成。 使用jQuery都是这样开始写脚本的 $(document).ready(function(){ //do something })其实它等价于： $().ready(function(){ ...
window.onload和document.ready
打工人
04-24 217
window.onload 必须等到页面内包括图片的所有元素和资源加载完毕后才能执行 document.ready DOM加载完毕后就执行，不必等到整个网页资源加载完毕
js一加载就执行
碉堡飞哥的博客
04-24 6314
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。 1：执行时间不同 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕，document.ready()加载的速度较快，只需要等待dom树的加载，无需等待图片以及媒体资源。 而window...
window.onload和$(document).ready？
m0_71955188的博客
09-11 505
window.onload 和 $(document).ready() 都是用来在页面加载完成后执行 JavaScript 代码的方法，但是它们之间存在一些差异。 window.onload 方法是在页面所有元素（包括图片、样式、链接等）加载完成后触发的，在这个事件之前，页面上的所有资源都必须加载完成。因此，如果页面中包含大量的图片或其他资源，那么 window.onload 事件可能比较晚触发，可能需要等待几秒钟或更长时间才会被触发。这意味着在使用 window.onload 时需要等待所有的资源加载完成
document.ready和window.onload.docx
最新发布
07-24
windows
$(document).ready()与window.onload的区别
No_Name_Cao_Ni_Mei的博客
07-02 491
选择使用还是取决于你的具体需求。如果你只需要确保DOM已经加载完成，并且正在使用jQuery，那么是一个更好的选择。如果你需要等待页面上的所有资源都加载完成，或者不使用jQuery，那么将更加合适。
Javascript的window.onload和jQuery的$(document).ready有什么区别？
07-09
window.onload 和 $(document).ready() 都是用来在页面加载完成后执行一些代码的方法，但它们有一些区别。 1. 触发时机： - window.onload：在整个页面（包括资源）都加载完成后触发，包括图片、样式表、脚本等。 ...
转 $(document).ready()与window.onload的区别
gbz2000的博客
03-02 1082
$(document).ready()和window.onload在表单上看都是页面加载时我们就去执行一个函数或动作，但是在具体的细节上$(document).ready()和window.onload还是有区别的，下面我来介绍介绍。 最基本的区别 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数不同 window.onload不能同时编写多个，如果有多
$(document) .ready()与window. onload的区别
热门推荐
daponi的博客
07-05 1万+
     JQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的，可以先去理解下DOM在另一篇文章中:https://blog.csdn.net/daponi/article/details/94597948 区别： 1.执行时间 在一般...
一分钟了解window.onload和$(document).ready
m0_52358470的博客
12-30 2481
window.onload和$(document).ready的区别，window.onload和DOMContentLoaded的区别，面试题
window.onload和$(document).ready()
gengyigang的专栏
12-22 286
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。 1.执行时间         window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。         $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编...
$(document).ready()与window . onload的区别
DAYDAYUP
05-19 231
功能区别 因为javaScript脚本往往需要在文档加载完成后才能执行，否则可能会出现无法获取对象的情况，为了避免这样的情况，可以将脚本文件放在页面底部，或者使用window.onload。 而$(document).ready（）与window.onload功能相似，有一些区别： 执行时间有区别 window.onload必须等到所有资源加载完成后，才可以执行 而$(documen...
window.onload 和$(document).ready的区别
DLGDark的博客
08-17 329
window.onload 是在dom文档树加载完和所有文件加载完之后执行一个函数Document.ready原生种没有这个方法，jquery中有 $().ready(function),在dom文档树加载完之后执行一个函数（注意：这里面的文档树加载完不代表全部文件加载完）。 $(document).ready要比window.onload先执行 window.onload只能出来一次，$(d
windowonload 与documentready的对比
花木兰
01-17 194
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值