Window.onload和$document.ready区别

最新推荐文章于 2024-11-16 14:11:26 发布
最新推荐文章于 2024-11-16 14:11:26 发布
阅读量377 收藏 8
点赞数 7
分类专栏： javaScript 文章标签： javascript 开发语言 ecmascript 前端 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61914498/article/details/135688799
版权
本文对比了Window.onload与$document.ready在网页加载过程中的执行时间、触发条件和可编写次数，指出document.ready在DOM加载完成后即执行，比Window.onload更早，且支持多个事件同时处理。
摘要由CSDN通过智能技术生成
共同点 

        Window.onload和$document.ready都是加载资源

区别
        第一点 执行时间

                在我们一个网页中执行时间

                域名分享

                加载HTML

                加载js和css

                解析脚本代码

                构造html的dom模型

                加载dom元素

                              时间节点一

                加载图片等非文字媒体文件

                               时间节点二

                网页加载完毕

                 Window.onload是在等待页面i中的图片所有元素和资源都加载完成之后才能去执行也是等上面所说的时间节点一去进行加载

                document.ready是等dom加载完毕后就执行，不比等到整个页面加载完成的资源加载完毕

        编写写个数不同

                   Window.onload不能同时编写多个  如果有多个Window.onload也是只会执行一个

                   document.ready可以编写多个并且同时可以多个进行执行

        所以 document.ready比Window.onload执行速度更快

                

weixin_61914498
关注
专栏目录
【js的window.onload和jquery的.ready()什么区别】
学无止境
02-24 848
【js的window.onload和jquery的.ready()什么区别】
jQuery中的.ready()和window.onload的区别及示例代码
ByteZenith的博客
09-27 311
在JavaScript和jQuery中，我们经常需要在文档加载完毕后执行一些代码。jQuery提供了.ready()函数，而原生JavaScript则提供了window.onload事件。在上面的代码中，当文档解析完成后，$.ready()函数的回调函数将会被执行，并显示一条消息在控制台上。而当整个页面加载完成后，window.onload事件触发，它的回调函数同样会在控制台上显示一条消息。根据你的需求，选择适合的方法来确保你的代码在正确的时机执行。
window.onload和$(document).ready？
m0_71955188的博客
09-11 408
window.onload 和 $(document).ready() 都是用来在页面加载完成后执行 JavaScript 代码的方法，但是它们之间存在一些差异。 window.onload 方法是在页面所有元素（包括图片、样式、链接等）加载完成后触发的，在这个事件之前，页面上的所有资源都必须加载完成。因此，如果页面中包含大量的图片或其他资源，那么 window.onload 事件可能比较晚触发，可能需要等待几秒钟或更长时间才会被触发。这意味着在使用 window.onload 时需要等待所有的资源加载完成
一分钟了解window.onload和$(document).ready
m0_52358470的博客
12-30 2453
window.onload和$(document).ready的区别，window.onload和DOMContentLoaded的区别，面试题
window..onload和$(document).ready()
小瑾沐晚风的博客
09-17 626
在Jquery里面，$(function(){}) 和$(document).ready(function(){})，这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。 $(document).ready是在DOM完全就绪时就可以被调用。 而window.onload是在dom文档树加载完和所有文件（包括图片等非文字媒体文件...
window.onload和$(document).ready()之间的区别
qq_41413652的博客
11-11 184
window.onload和$(document).ready()都是用于在页面加载完成后执行特定代码的方法，但它们之间存在一些区别： 一、执行时机 window.onload： 当页面的所有资源（包括图片、样式表、脚本等）都完全加载完毕后才会触发。 这意味着如果页面上有较大的图片或其他资源需要较长时间加载，那么window.onload的执行会被延迟。 $(document).ready()： 当 DOM（文档对象模型）树构建完成后就会触发，此时页面的 HTML 结构已经加载完毕，但可能某些
java window.onload_[Java教程]浏览器加载模式：window.onload和$(document).ready()的区别(详解)...
weixin_39767983的博客
03-02 140
[Java教程]浏览器加载模式：window.onload和$(document).ready()的区别(详解)02014-08-15 18:01:20jQuery库文件是在body元素之前加载的，必须等待所有的DOM元素加载后，延迟支持DOM操作，否则就无法获取到。在延迟等待加载，JavaScript提供了一个事件为load，方法如下：window.onload = function () {}...
简单说明window. onload和$(document). ready(function(){})的区别
sinat_34937826的博客
04-17 689
window.onload和$(document).ready(function(){})的区别 继续整理老笔记…… 1、执行时间上的区别： window.onload 必须等到页面内（包括图片的）所有元素加载到浏览器中后才能执行。 $(document).ready(function(){}) 是DOM结构加载完毕后就会执行。 所以，假如他俩同时存在的话，$(document).ready 会比...
window.onload、$(document).ready()、Vue.created() 页面加载完成后执行方法
pan_junbiao的博客
08-15 1068
JQuery 框架的$(document).ready() 方法和window.onload 方法有相似的功能，但是在执行时机方面时有区别的。window.onload 方法是在页面中所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即 JavaScript 此时才可以访问页面中的任何元素。而通过 JQuery 中的$(document).ready() 方法注册的事件处理程序，在 DOM 完全就绪时就可以被调用。此时，页面的所有元素对 JQuery 而言都是可以访问的。
window.onload和$(document).ready(function(){})的区别
angnai5032的博客
01-23 159
1、执行时间上的区别：window.onload必须等到页面内（包括图片的）所有元素加载到浏览器中后才能执行。而$(document).ready(function(){})是DOM结构加载完毕后就会执行。 2、编写个数不同：window.onload不能同时写多个，如果有多个window.onload，则只有最后一个会执行，它会把前面的都覆盖掉。$(document).ready(f...
window.onload和$(document).ready
php_martin的博客
08-01 102
window.onload和$(document).ready
JQ中$(window).load和$(document).ready区别与执行顺序
10-20
在JavaScript和jQuery中，`$(document).ready()`和`$(window).load()`是两种常见的事件绑定函数，它们分别用于在不同的页面加载阶段执行相应的代码。理解它们的区别和执行顺序对于优化网页性能和确保脚本正确运行至...
一张表格告诉你windows.onload()与$(document).ready()的区别
09-04
在JavaScript和jQuery中，`window.onload()` 和 `$(document).ready()` 都是用于处理页面加载事件的关键函数，但它们的执行时机和用法存在显著差异。了解这些区别对于优化前端性能和确保代码正确执行至关重要。 1. ...
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 433
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
如何编译 Cesium 源码
ismartcube的博客
11-13 1088
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
从零开始快速构建Vue3项目
欧唯薇
11-13 884
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
【Node.js】Node.js 和浏览器之间的差异
最新发布
佚名程序员
11-16 807
Node.js 是一个基于 Chrome V8 引擎构建的开源 JavaScript 运行时，它使开发者能够在服务端运行 JavaScript 代码。Node.js 提供了高效的事件驱动和非阻塞 I/O 模型，广泛应用于构建快速、可扩展的网络应用。核心特性单线程：使用事件循环机制实现并发。非阻塞 I/O：适合高并发应用。模块化：采用 CommonJS 模块系统。浏览器是前端开发的主要运行环境。其核心任务是解析 HTML、CSS 和 JavaScript，并呈现网页内容。
Vue常用加密方式
m0_51431448的博客
11-13 147
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
Nuxt2和Nuxt3 对于SEO优化的区别
书山有路_邓
11-14 560
nuxt
Javascript的window.onload和jQuery的$(document).ready有什么区别？
07-09
window.onload 和 $(document).ready() 都是用来在页面加载完成后执行一些代码的方法，但它们有一些区别。 1. 触发时机： - window.onload：在整个页面（包括资源）都加载完成后触发，包括图片、样式表、脚本等。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值