window.onload和$(document).ready(function(){})的区别

原文出自:http://www.php100.com/html/program/jquery/2013/0905/5954.html

1、执行时间上的区别:window.onload必须等到页面内(包括图片的)所有元素加载到浏览器中后才能执行。而$(document).ready(function(){})是DOM结构加载完毕后就会执行。

2、编写个数不同:window.onload不能同时写多个,如果有多个window.onload,则只有最后一个会执行,它会把前面的都覆盖掉。$(document).ready(function(){})则不同,它可以编写多个,并且每一个都会执行。

3、简写方法:window.onload没有简写的方法,$(document).ready(function(){})可以简写为$(function(){})。

另外:由于在$(document).ready()方法内注册的事件,只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载完,例如与图片有关的HTML下载完毕,并且已经解析为DOM树了,但很有可能图片还未加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。

要解决这个问题,可以使用JQuery中另一个关于页面加载的方法---load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。如:$(window).load(function(){})=====window.onload = function(){}...

转载于:https://www.cnblogs.com/bu12/p/10811800.html

### jQuery `$(document).ready` `window.onload()` 的执行顺序 在网页加载过程中,`$(document).ready` `window.onload` 都用于指定当页面达到特定状态时要运行的代码。然而两者触发条件不同。 - 当 DOM 文档结构完全加载完成之后会立即调用由 `$(document).ready` 绑定的方法,在此阶段图像等资源可能尚未下载完毕[^1]。 - 而 `window.onload` 则会在整个页面的所有组件(包括图片、样式表其他媒体文件)都已加载完成后才会被触发。 因此通常情况下 `$(document).ready` 执行得更早一些;如果存在多个 `$(document).ready` 函数,则它们按照定义顺序依次被执行。而只有一个全局级别的 `onload` 事件处理程序可以设置给窗口对象,任何新的赋值都会覆盖之前的函数指派。 下面通过一段简单的 HTML 来展示两者的区别: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document Ready vs Window OnLoad</title> <!-- 引入 jQuery 库 --> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <script type="text/javascript"> // 使用 $(document).ready() $(document).ready(function(){ console.log('DOM is ready'); }); // 使用 window.onload window.onload = function() { console.log('All resources are loaded'); }; </script> </body> </html> ``` 在这个例子中,“DOM is ready”的日志消息应该先出现,紧接着才是“All resources are loaded”。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值