文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript中onload和ready的区别是什么

2023-06-27 10:32

关注

本文小编为大家详细介绍“JavaScript中onload和ready的区别是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript中onload和ready的区别是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

1.履行时间

window.onload( ) 必须等到页面内包括图片的所有元素加载终了后才能履行。 

$(document).ready( )是 DOM 结构绘制终了后就履行,没必要等到加载终了。也就是说 $(document).ready( ) 要比window.onload( ) 先履行。

2.编写个数不同

window.onload( )不能同时编写多个,如果有多个 window.onload( ) 方法,只会履行一个 

$(document).ready( )可以同时编写多个,并且都可以得到履行

3.简化写法

window.onload( )没有简化写法 

$(document).ready(function( ){  })可以简写成 $(function( ){  });

在常规的 JavaScript 代码中,通常使用 window.onload( )方法,而在 jQuery 中,使用的是 $(document).ready( ) 方法。

$(document).ready( )方法和 window.onload( ) 方法有相似的功能,但是在履行时机方面是有区分的。window.onload( ) 方法是在网页中所有的元素(包括元素的关联文件)完全加载到阅读器后才履行,即 JavaScript 此时才可以访问网页中的任何元素。而通过 jQuery 中的 $(document).ready() 方法注册的事件处理程序,可以在 DOM 完全就绪时就能够被调用。此时,网页的所有元素对jQuery而言都是可以访问的,但是,这其实不意味着这些元素关联的文件都已下载终了。

例:load( ) 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象,则会在所有内容(包括窗口、框架、对象和图象等)加载终了后触发,如果处理函数绑定在元素上,则会在元素的内容加载终了后触发。

最多见的例子是一些图片的网站,有时候你会看到有的网站是所有的图片都有一个占位符,在页面加载好之前图片就已占有一定的空间了,然后每张各自的加载,这类情势是使用了 $(document).ready( )方法。有的网页是要等全部图片都加载好以后 才显示网页,当网速不好的时候一个页面需要等很久才能显示出来,这就是使用了 window.onload( )方法。很明显,把网页解析为 DOM 树的速度比把网页中的所有关联文件加载终了的速度快很多。

另外需要注意一点,由于在 $(document).ready() 方法内注册的事件,只要 DOM 就绪就会被履行,因此可能此时元素的关联文件未下载完。例如与图片有关的 HTML下载终了,并且已解析为 DOM 树了,但很有可能图片还未加载终了,所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题,可使用 JQuery 中另外一个关于页面加载的方法—— load() 方法。load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象,则会在所有内容(包括窗口、框架、对象和图象等)加载终了后触发,如果处理函数绑定在元素上,则会在元素的内容加载终了后触发。

读到这里,这篇“JavaScript中onload和ready的区别是什么”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯