备案 控制台
学习
实践
活动
专区
工具
TVP
写文章
专栏首页 程序技术知识 window.onload 与 $(document).ready()比较
4 0

海报分享

原创

window.onload 与 $(document).ready()比较

原生onload方法和jQuery的ready方法。


ready事件发生在加载HTML文档之后,而onload事件发生在稍后,此时所有内容(例如图像)也已加载。

onload事件是DOM中的标准事件,而ready事件特定于jQuery。 ready事件的目的是它应该在文档加载后尽早发生,以便为页面中的元素添加功能的代码不必等待加载所有内容。

例子:

ready表示图片还未加载,就已经发生了,而onload是图片加载之后才发生

window.load

$(document).ready()

执行时机

必须等待网页中所有内容加载完毕后才能执行(包括图片等)

只要网页中的DOM结构绘制完毕就执行(与DOM相关的文件此时可能还未下载完毕)

使用情况

1.不能同时执行多个,若编写多个函数只执行最后一个(前面的被覆盖)。window.onload = function() test1{undefined  alert("function1");};window.onload = function() test2{undefined  alert("function2");}最终输出结果为"function2"。2.如果想实现多个函数的调用,可以创建一个新的函数来包含它们。window.onload = function(){undefined  test1();  test2();}

1.能够同时编写多个函数,按注册顺序执行。$(document).ready(function(){undefined  test1();});$(document).ready(function(){undefined  test2();})两次都输出。2.如果想实现window.onload一样的功能,调用load()方法。$(window).load(function(){undefined  //代码})

简化

以下两种形式与$(document).ready()等价,但更简洁。1.$().ready(function(){  //代码 });2.$(function(){ //代码 });

原创声明,本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。