JS中的onload()函数和jQuery中的document.ready()

最新推荐文章于 2022-05-05 14:16:57 发布
最新推荐文章于 2022-05-05 14:16:57 发布
阅读量264 收藏
点赞数
分类专栏： js&jQuery 文章标签： js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42880033/article/details/109307166
版权

JS中的onload()函数和jQuery中的document.ready()

onload()
onload 事件会在页面或图像加载完成后立即发生。
onload 通常用于 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

<body onload="load()">
//页面加载之后立即执行一段 JavaScript

document.ready()
当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

$(document).ready(function)

$().ready(function)

$(function)

//注：ready() 函数不应与 <body onload=""> 一起使用。

区别
在页面中可以使用多个document.ready()，但只能使用一次onload()。

cheng不会秃头呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery的ready函数与JS的onload的区别详解
12-10
JQuery的ready函数与JS的onload的区别：1.执行时间[removed]必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数不同[removed]不能...
jquery中$(document).ready、$(window).load和body.Onload()之间的区别
date25000的博客
03-22 111
JavaScript文档加载完成事件 window.load(function(){...})和body.onload()都存在同样一个问题，那都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的,这是它们的共同点.$(document).ready()是文档结构已经加载完成（不包含图片等非文字媒体文件），不必等到所有的加载完毕。 原理是...
body中的onload()函数和jQuery中的document.ready()有什么区别？
dgce56105的博客
06-21 1640
1、我们可以在页面中使用多个document.ready()，但只能使用一次onload()。 2、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。 转载于:https://www.cnblogs.com/ygunoil/p/9210758.html...
前端 js 页面加载完成事件 - onload，五种写法
firstcode666的博客
11-27 4644
在js和jquery使用中，经常使用到页面加载完成后执行某一方法。通过整理，大概是五种方式（其中有的只是书写方式不一样）。 1：使用jQuery的$(function){}; 2：使用jquery的$(document).ready(function(){}); 前两者本质上没有区别，第1种是第2种的简写方式。两个是document加载完成后就执行方法。 3：使用jQuery的$(window).load(function(){}); 4：使用window.onload = functi..
页面加载完成事件 - onload，四种写法
热门推荐
yiyueqinghui的博客
11-17 1万+
在js和jquery使用中，经常使用到页面加载完成后执行某一方法。通过整理，大概是五种方式： js动态加载外部插件后，导致页面加载顺序不是按照代码的书写顺序执行，引起报错， 这时候就可以用监听页面加载完成事件来指定代码的加载顺序 1、JQuery方法 方法 $(function){} $(document).ready(function(){}) 说明 $(function){}是$(document).ready(function(){})的简写方式。 两个都是document加载完成后就执行回调
js事件DOMContentLoaded与load
到达的专栏
10-18 3961
浅谈script标签中的async（异步脚本）和defer（延迟脚本）属性：https://www.cnblogs.com/jiasm/p/7683930.html (1)chrome浏览器中，看到network网络面板中有DOMContentLoaded与load两个数值，分别对应网络请求上相应标志线，这两个时间数值分别代表？ (2)一再强调将css放在头部，将js文件放在尾部(如：&l...
document.ready和onload的区别——JavaScript文档加载完成事件
weixin_33734785的博客
12-09 533
2019独角兽企业重金招聘Python工程师标准>>> ...
<body>标签中onload方法与 Jquery库函数 $(selector).ready()比较
hungerliu的博客
12-14 731
这个方法的不足之处是如果遇到网页需要加载的内容过多，就可能会发生用户在脚本执行前就进行了一些操作，导致问题发生。 $(document).ready(function (){ alert('use in page script tag') ;});ready方法则会在页面的dom加载完后就可以加载一些方法(当然与浏览器的支持有一定关系，不如onload通用)，而不用等待全部元素加载完
jQuery中的read和JavaScript中的onload函数的区别
12-09
在JavaScript中，onload函数是最经常使用的，几乎涉及到JavaScript的童鞋都少不了要接触它。这个函数的作用就是等待网页完全装载完了以后再去执行代码块内的语句，因为按照文档流的执行顺序，通常用于头部加载...
jquery中的$(document).ready()使用小结
12-11
[removed] = function(){ ... 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度比onload()的方法要快。 Javasc
JQuery下关于$.Ready()的分析
12-12
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload事件...
jquery ready函数源代码研究
12-09
Jquery库提供了一个非常方便好用的函数( $(selector).ready()),让我们可以在页面的dom加载完后就可以做相应的操作(当然,这还得看用户浏览器的支持).,而不用等待全部元素加载完成.例如: $(document).ready(function ...
document.onLoad指定一个函数，跟在Body标签中加入onLoad是一样的 不过能过今天的示例发现，document.onLoad并不是在页面加载完成时引发
qq_44727381的博客
05-05 2155
问题： 我一直认为使用javascript的document.onLoad指定一个函数，跟在Body标签中加入onLoad是一样的 不过能过今天的示例发现，document.onLoad并不是在页面加载完成时引发。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text
jQuery_04 事件&动画
qq_61313896的博客
03-12 233
一：jQuery的加载DOM方式有哪些？ JavaScript方式 window.onload 只会加载一次并且在整个网页中只能编写一次 执行时间：整个网页所有内容全部加载完成之后,才会执行 //JavaScript编写方式 window.onload = function() { console.log("a") } jQuery方式 可以加载多次并且在整个网页中可以编写多次......
jQuery的引入及onload事件的几种方式
~~
04-13 6253
（一）jQuery下载 链接：https://pan.baidu.com/s/1ODSzeDbx1geKrDuwTuqvhw 提取码：pz0e （二）onload事件的几种方式（普通方式，jQuery方式） 新建web项目，导入jQuery进js文件夹 比如现在我们要实现如下功能：弹出“helloworld”对话框，普通的方式有以下几种 第一种方式： <!DOCT...
浅谈文档加载完成事件——document.ready和onload的区别
筱葭的博客
03-20 1万+
文档加载完成的两种事件 ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）onload，指示页面包含图片等非文字媒体文件在内的所有元素都加载完成。   1、DOM ready 文档加载的顺序：域名解析-->加载HTML-->加载JavaScript和CSS-->加载图片等非文字媒体文件。 DOM ready在加载JavaScript和CSS与加载图片等非文字媒
JS 页面加载触发事件 document.ready和onload的区别
码农的田园
03-18 9959
页面加载完成有两种事件： 一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）； 二是onload，指示页面包含图片等文件在内的所有元素都加载完成。   1、Dom Ready 用jQ的人很多人都是这么开始写脚本的： $(function(){ // do something }); 例如： $(function() {      $("a
JS中页面加载事件window.onload、onload()、document.onclick
xiaokangmiclong的博客
11-20 8780
当我们刷新页面的时候，有时需要页面自动加载一些事件来达到预期效果，现介绍下面三种方法Onload()、addLoadEvent()、document.onclick。 onload() 事件会在页面或图像加载完成后立即发生。注意是在页面或图像加载后才发生，所以当页面有很大数据量没加载完时，onload()事件不会发生。而addLoadEvent()会在页面刷新的时候发生，document.o
Python课程设计 课设 手写数字识别卷积神经网络源码+文档说明.zip
最新发布
04-24
高分设计源码，详情请查看资源内容中使用说明 高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明高分设计源码，详情请查看资源内容中使用说明
Javascript的window.onload和jQuery的$(document).ready有什么区别？
07-09
window.onload 和 $(document).ready() 都是用来在页面加载完成后执行一些代码的方法，但它们有一些区别。 1. 触发时机： - window.onload：在整个页面（包括资源）都加载完成后触发，包括图片、样式表、脚本等。 - $(document).ready()：在DOM结构加载完成后触发，不等待外部资源的加载。 2. 多次调用： - window.onload：只能定义一个处理函数，如果多次调用，只会执行最后一个。 - $(document).ready()：可以定义多个处理函数，它们将按照定义的顺序依次执行。 3. 页面加载状态： - window.onload：只有在整个页面加载完成后才会触发。 - $(document).ready()：DOM结构加载完成就会触发，此时可能还有一些外部资源未加载完毕。 4. 使用方式： - window.onload：可以直接使用，无需引用其他库。 - $(document).ready()：需要引入jQuery库才能使用。 总体来说，window.onload 更适合在页面完全加载后执行需要等待外部资源的情况，而$(document).ready() 更适合在DOM结构加载完成后执行操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值