window.onload与$(document).ready()执行时间

最新推荐文章于 2024-09-24 21:38:41 发布
原创 最新推荐文章于 2024-09-24 21:38:41 发布 · 461 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#IE #Firefox #浏览器

本文深入探讨了页面加载过程中的onload事件与$(document).ready()方法的区别，阐述了两者在不同场景下的应用及优先级，特别关注于在IE中嵌入frame时的行为差异。
onload事件是在所有资源都准备完成之后才执行。
$(document).ready()该方法实现的页面加载后 执行函数将在浏览器构建完DOM树后立刻执行，而并不需要等待图片等外部资源下载完成。

而window.onload会在整个文档都加载完成后才会执行，常见的就是对于页面含很多图片的情况下，必须等到图片都下载 下来后才会执行。而$(document).ready()不会。

$(document).ready()会优于window.onload先执行.


另一种情况：
IE在页面中嵌入frame中的情况下才和Firefox等一样，先执行$(document).ready()的内容， 再执行原来的onload方法。对于嵌入frame中的页面，也只是绑定在load事件上执行，所以自然是在原来的onload绑定的方法执行之后才轮 到。而这个页面中正好在测试环境下有一个访问不到的资源，那十几秒的延迟正是它放大出的时间差。
(待验证)
iteye_15860
关注
【js的window.onload和jquery的.ready()什么区别】
学无止境
02-24 1014
【js的window.onload和jquery的.ready()什么区别】
window.onload执行时间
仿秀达人
01-16 665
在JS中，如果希望在页面加载完成后执行某些操作的话，一般的写法如下： window.onload = function(){//ToDo}; 但是，onload函数的执行并不是我们通常所理解的浏览器构建完html页面对应的DOM树后立刻执行，而是要等到页面中所引用的图片等外部资源 完全下载完成后并且在浏览器中显示才执行，也就是说，如果页面中包括很多图片或者图片很大时将导致onload函数执行时
window.onload什么时候执行
hexadecimal_001的博客
09-24 966
事件的处理函数中，你可以安全地引用页面上的所有元素，因为此时它们都已经加载到DOM中，并且所有的样式和脚本也都已经应用和执行完毕。这个事件特别有用，当你需要在页面加载完毕后立即执行某些操作（比如初始化JavaScript插件、发送统计信息等）时。赋值操作，那么只有最后一个会被执行，因为前一个会被后一个覆盖。为了避免这种情况，你可以使用。事件在页面的所有资源（包括样式表、脚本文件、图片等）都加载完成后立即执行。方法可以让你为同一个事件添加多个监听器，而不会相互覆盖。需要注意的是，如果你在页面中有多个。
多个$(document).ready()的执行顺序实例分析
09-04
主要介绍了多个$(document).ready()的执行顺序实例分析,对于加深理解$(document).ready()的加载与执行顺序有很大帮助,需要的朋友可以参考下
jQuery中documen.ready()什么时候执行以及动态绘制结构事件绑定
web开发自学
02-05 100
documen.ready()在什么时候开始执行？ 在网页中所有DOM结构绘制完毕后就执行。可以简写成：$(function (){<wbr> });</wbr> <wbr></wbr> 但我们来看这段代码： <wbr><script type="text/javascript">&lt
js window.onload、$(document).ready、直接执行代码 什么时候运行
puspos的博客
11-28 414
页面加载顺序：域名解析 - 加载 html文件 - 加载外部 js 和 css文件 - 加载图片等 加载HTML 文件：会从头开始解释整个文件，包括 html 标签和js代码。如果脚本中有可以直接执行的语句，则会在遇到的时候马上解释执行。 //1. 页面的hmtl，外部的CSS、js、图片等的所有元素加载完毕后才执行，只能有一个window.onload window.onload=function(){}; //2. 页面的html文件加载后，既可以了，它主要用于获取处理dom。该方法可有多个 $(fun
JavaScript页面加载完成后执行方法：window.onload、$(document).ready()、Vue.created()
pan_junbiao的博客
08-15 2027
JQuery 框架的$(document).ready() 方法和window.onload 方法有相似的功能，但是在执行时机方面时有区别的。window.onload 方法是在页面中所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即 JavaScript 此时才可以访问页面中的任何元素。而通过 JQuery 中的$(document).ready() 方法注册的事件处理程序，在 DOM 完全就绪时就可以被调用。此时，页面的所有元素对 JQuery 而言都是可以访问的。
JQ中$(window).load和$(document).ready区别与执行顺序
10-20
1. **执行时间**：`$(document).ready()`先于`$(window).load()`执行，因为它不等待所有外部资源的加载。而`$(window).load()`必须等到所有资源加载完毕才会执行。 2. **可执行次数**：`$(document).ready()`可以被...
window.onload与jQuery($(document).ready())
明德zhuang
07-17 697
(document).ready()方法
一张表格告诉你windows.onload()与$(document).ready()的区别
09-04
在JavaScript和jQuery中，`window.onload()` 和 `$(document).ready()` 都是用于处理页面加载事件的关键函数，但它们的执行时机和用法存在显著差异。了解这些区别对于优化前端性能和确保代码正确执行至关重要。 1. ...
window.onload 啥时候使用？
lingling_df的博客
02-23 1364
本来是做一个小demo，点击按钮div背景色变红和变蓝， 但是我将方法写在window.onload =function(){.....}里面，就会报错， 难道这个方法不能写在页面加载完成后？ 代码是这样： 然后我查了下，说函数和全局变量的声明不要写在window.onload=function(){....}里， 在页面一开始就需要执行的代码要写在windo
JavaScript 中的 window onload 应该什么时候写
团子大圆帅的博客
03-07 2069
JavaScript 中的 window.onload 应该什么时候写 文章目录JavaScript 中的 window.onload 应该什么时候写0. 参考资料1. 页内式 JS 代码1.1 页内式 JS 代码写在 head 内部1.2 页内式 JS 代码写在 body 结束之前1.3 结论2. 外链式 JS 代码3. 杂谈 0. 参考资料 《JavaScript DOM 编程艺术》第 ...
window.onload和$(document).ready()的加载执行顺序
专注、专心、专业
05-08 1727
window.onload和jquery中的$(document).ready()的加载执行顺序:  近期在做一个嵌入在frame中的页面的时候，使用了jquery做效果，而页面本身也绑定了onload事件。改完后，Firefox下测试正常流畅，但IE下就要等个十几秒jquery的效果才出现，很是郁闷。  开始还以为是和本身onload加载的方法冲突。网上普遍的说法是$(document).r
测试window onload的执行顺序
一只苟延残喘的卑微蝼蚁
12-12 1389
测试window.onload的执行顺序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试window.onload的执行顺序</title> </head> <body> &l
window.onload的加载时间
04-10 1380
今天我遇见一个window.onload加载的问题，不知道它是什么时候加载的。于是我测了一下，代码如下： window.onload=function(){  document.getElementById('divFill').style.height = 100 +"px";    alert("inner:"+document.getElementById('divFill').s
window.onload执行顺序详解
java的涟漪
09-09 696
当js中有window.onload，而<BODY>中又有onload属性时，window.onload在<HEAD>中 情况一，window.onload指定的function是匿名的，则只执行后者，且动作是后者的动作。如： <html> <head> <script type="text/javascri...
浏览器加载模式：window.onload和$(document).ready()的区别(详解)
weixin_33834137的博客
08-15 186
jQuery库文件是在body元素之前加载的，必须等待所有的DOM元素加载后，延迟支持DOM操作，否则就无法获取到。 在延迟等待加载，JavaScript提供了一个事件为load，方法如下： window.onload = function () {}; //JavaScript等待加载 $(document).ready(function () {}); //jQuery等待加载load...
JS中window.onload()事件
weixin_44134816的博客
03-17 3336
1.onload事件会在整个页面加载完成后才会触发 2.window绑定一个onload事件 --该事件对应的响应函数将会在页面加载完成之后执行 --这样可以确保代码执行时所有的DOM对象已经加载完毕 --html执行顺序从上到下（js代码在body前面，会导致先执行js代码，再加载dom对象），window.onload()可以解决这个问题 例如： window.onload=function(){ ---函数中放js代码 } ...
一分钟了解window.onload和$(document).ready
m0_52358470的博客
12-30 2506
window.onload和$(document).ready的区别，window.onload和DOMContentLoaded的区别，面试题
window.onload和$(async () => {的区别？
最新发布
11-04
`window.onload` 和 `$(async () => {` 是 JavaScript 中用于在特定时机执行代码的两种不同方式，它们存在以下区别： ### 触发时机 - **`window.onload`**：该事件会在整个页面（包括所有资源，如图片、样式表等）完全加载完成后触发。这意味着只有当页面上的所有元素都被下载并渲染完毕，才会执行 `window.onload` 中的代码。示例代码如下： ```javascript window.onload = function() { console.log('页面所有资源加载完成'); }; ``` - **`$(async () => {`**：这是 jQuery 中的 `$(document).ready()` 方法的异步函数写法。`$(document).ready()` 会在 DOM 树构建完成后立即执行，而不需要等待所有资源（如图片）加载完成。示例代码如下： ```javascript $(async () => { console.log('DOM 树构建完成'); }); ``` ### 依赖情况 - **`window.onload`**：属于原生 JavaScript 的事件，不依赖任何第三方库，可直接在纯 JavaScript 项目中使用。 - **`$(async () => {`**：依赖 jQuery 库，若项目中未引入 jQuery，代码将无法正常工作。 ### 代码执行顺序 - **`window.onload`**：由于要等待所有资源加载完成，执行时间可能会较晚。如果页面包含大量图片或其他大型资源，`window.onload` 中的代码可能会延迟执行。 - **`$(async () => {`**：因为只等待 DOM 树构建完成，通常会比 `window.onload` 更早执行，能让用户更快地与页面进行交互。 ### 异步处理 - **`window.onload`**：本身不具备异步处理能力，若要处理异步操作，需手动编写异步代码，如使用 `Promise`、`async/await` 等。 - **`$(async () => {`**：可以结合 `async/await` 语法，方便地处理异步操作。例如： ```javascript $(async () => { try { const response = await fetch('https://example.com/api'); const data = await response.json(); console.log(data); } catch (error) { console.error('请求出错:', error); } }); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值