位置: 编程技术 - 正文

深入分析jQuery的ready函数是如何工作的(工作原理)(简述jquery的优势)

编辑:rootadmin

推荐整理分享深入分析jQuery的ready函数是如何工作的(工作原理)(简述jquery的优势),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:简述jquery的常用方法,jquery原理解析,浅谈jquery的应用,jquery的理解,简述jquery,jquery概述,jquery原理解析,jquery原理解析,内容如对您有帮助,希望把文章链接给更多的朋友!

本文深入分析jQuery的ready函数是如何工作的。分享给大家供大家参考,具体如下:

jQuery 是一个伟大的脚本库,由 John Resig 在 年1月的BarCamp NYC上释出第一个版本。你可以在 下载到最新版本,截止本文发布为止已更新到jQuery 2.1.4版。这里以jQuery1.8.3为例分析。

学习 jQuery 有许多途径,我们今天从 jQuery 的 ready 函数开始。本例中的代码都来自于 jQuery 脚本库。

如果你使用过 jQuery , 就必然使用过 ready 函数,它用来注册当页面准备好之后可以执行的函数。

问题来啦,我们的页面什么时候准备好了呢?

1. onload 事件

最基本的处理方式就是页面的 onload 事件,我们在处理这个事件的时候,可以有多种方式,即可以通过 HTML 方式,直接写在 body 元素的开始标记中,也可以使用事件注册的方式来使用,这又可以分为 DOM0 方式和 DOM2 方式。再考虑到浏览器的兼容性,使用 DOM2 方式写出来,如下所示。

2. DOMContentLoaded 事件

不过 onload 事件要等到所有页面元素加载完成才会触发, 包括页面上的图片等等。如果网页上有大量的图片,效果可想而知,用户可能在没有看到图片的时候,就已经开始操作页面了,而这时我们的页面还没有初始化,事件还没有注册上,这岂不是太晚了!

除了大家熟知的 onload 事件之外, 与 DOM 中的 onload 事件相近的,我们还有 DOMContentLoaded 事件可以考虑, 基于标准的浏览器支持这个事件, 当所有 DOM 解析完以后会触发这个事件。

这样,对于基于标准的浏览器来说,我们还可以注册这个事件的处理。这样,我们可能更早地捕获到加载完成的事件。

3. onreadystatechange 事件

不标准的浏览器怎么办呢?

如果浏览器存在 document.onreadystatechange 事件,当该事件触发时,如果 document.readyState=complete 的时候,可视为 DOM 树已经载入。

不过,这个事件不太可靠,比如当页面中存在图片的时候,可能反而在 onload 事件之后才能触发,换言之,它只能正确地执行于页面不包含二进制资源或非常少或者被缓存时作为一个备选吧。

DOMContentLoaded 函数在做什么呢?最终还是要调用 jQuery.ready 函数。

深入分析jQuery的ready函数是如何工作的(工作原理)(简述jquery的优势)

4. doScroll 检测法

MSDN 关于 JScript 的一个方法有段不起眼的话,当页面 DOM 未加载完成时,调用 doScroll 方法时,会产生异常。那么我们反过来用,如果不异常,那么就是页面DOM加载完毕了!

Diego Perini 在 年的时候,报告了一种检测 IE 是否加载完成的方式,使用 doScroll 方法调用。详细的说明见这里。原理是对于 IE 在非 iframe 内时,只有不断地通过能否执行 doScroll 判断 DOM 是否加载完毕。在本例中每间隔 毫秒尝试去执行 doScroll,注意,由于页面没有加载完成的时候,调用 doScroll 会导致异常,所以使用了 try -catch 来捕获异常。

5. document.readyState 状态

如果我们注册 ready 函数的时间点太晚了,页面已经加载完成之后,我们才注册自己的 ready 函数,那就用不着上面的层层检查了,直接看看当前页面的 readyState 就可以了,如果已经是 complete ,那就可以直接执行我们准备注册的 ready 函数了。不过 ChrisS 报告了一个很特别的错误情况,我们需要延迟一下执行。

setTimeout 经常被用来做网页上的定时器,允许为它指定一个毫秒数作为间隔执行的时间。当被启动的程序需要在非常短的时间内运行,我们就会给她指定一个很小的时间数,或者需要马上执行的话,我们甚至把这个毫秒数设置为0,但事实上,setTimeout有一个最小执行时间,当指定的时间小于该时间时,浏览器会用最小允许的时间作为setTimeout的时间间隔,也就是说即使我们把setTimeout的毫秒数设置为0,被调用的程序也没有马上启动。

这个最小的时间间隔是多少呢?这和浏览器及操作系统有关。在John Resig的新书《Javascript忍者的秘密》一书中提到

Browsers all have a ms minimum delay on OSX and a(approximately) ms delay on Windows.(在苹果机上的最小时间间隔是毫秒,在Windows系统上的最小时间间隔大约是毫秒),另外,MDC中关于setTimeout的介绍中也提到,Firefox中定义的最小时间间隔(DOM_MIN_TIMEOUT_VALUE)是毫秒,HTML5定义的最小时间间隔是4毫秒。既然规范都是这样写的,那看来使用setTimeout是没办法再把这个最小时间间隔缩短了。

这样,通过设置为 1, 我们可以让程序在浏览器支持的最小时间间隔之后执行了。

6. 完整的代码

在 jQuery 中完整的代码如下所示。位于 jQuery 1.8.3 源代码的 # 行。

那么,又是谁来调用呢?当然是需要的时候,在我们调用 ready 函数的时候,才需要注册这些判断页面是否完全加载的处理,这段代码在 1.8.3 中位于代码的 # 行,如下所示:

在页面上引用 jQuery 脚本库之后,执行了 jQuery 的初始化函数,初始化函数中创建了 ready 函数。我们在通过 ready 函数注册事件处理之前,jQuery 完成了页面检测代码的注册。这样。当页面完全加载之后,我们注册的函数就被调用了。

补充:jquery ready 简写模式

Jquery ready 函数:

可简写为:

希望本文所述对大家jQuery程序设计有所帮助。

jQuery选择器用法实例详解 本文实例讲述了jQuery选择器用法。分享给大家供大家参考,具体如下:jQuery使用两种方式来选择html的element,第一种使用CSS和Xpath选择器联合起来形成一

jQuery+CSS实现滑动的标签分栏切换效果 本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果。分享给大家供大家参考。具体如下:运行代码如下具体代码如下htmlheadtitlejQuery平滑滚动的标签

jQuery实现进度条效果代码 在某些特定的场景下,应用进度条效果,可以提高网站的人性化程度,能够让用户能够掌握进度,增加对进度的耐心,否则可能直接导致关闭页面,从

标签: 简述jquery的优势

本文链接地址:https://www.jiuchutong.com/biancheng/377721.html 转载请保留说明!

上一篇:基于jquery实现省市联动特效(jquery示例)

下一篇:jQuery选择器用法实例详解(jquery选择器包含哪几大类)

  • 未达起征点的增值税要交企业所得税吗
  • 所得税汇算补提所得税会计分录
  • 未认证发票有时间限制吗
  • 增值税进项发票网上勾选平台
  • 社保费补缴有滞纳金吗
  • 出纳现金日记账表格模板
  • 企业购进口汽车会计分录
  • 母子公司间的借款现金流计入哪里
  • 水利基金的计税依据是含税收入还是不含税收入
  • 一般纳税人未达到起征点要交税吗
  • 主营业务成本没有结转怎么办
  • 为什么增值税不影响利润
  • 普通发票个人所得税隔审了怎么弄
  • 收入和成本都是真实发生的但是不匹配
  • 预付款退回扣除什么意思
  • 销售残次品怎么处罚
  • windows10如何开热点
  • 监理费的付款比例
  • 资产减值损失期末余额在哪方
  • 上市公司股票如何套现
  • vue怎么使用本地存储比较好
  • 电脑输入法设置搜狗输入法
  • linux抓包 udp
  • 不动产出租管理办法
  • 加拿大西北部的首都
  • for of 与for in
  • php文件上传技术
  • 开红字发票导入信息不完整怎么处理?
  • 所有者权益变动表模板excel
  • 小规模免征增值税2023
  • 织梦程序
  • discuz设置门户
  • 承租方承担税费
  • 不应确认增值税销项税额的
  • 运输公司燃油费占比
  • 跨年认证原材料是什么
  • 税务现金流量表填错了怎么办
  • sqlserver 恢复数据库
  • 固定资产处置的会计科目
  • 企业汇算清缴的工资薪金支出是怎么填
  • 简易计税方法的适用范围
  • 待摊费用和预提费用都属于资产类科目
  • 商品流通环节包括
  • 盈余公积转增实收资本对会计要素的影响
  • 溢价交易和折价交易
  • 长期借款利息是财务费用吗
  • 土地使用税为什么要交
  • 利润表里公允价值变动损益怎么算
  • 磁盘缓存技术
  • mysql迁移方案
  • mac下安装python
  • mysql5.7主从配置 博客园 my cnblog
  • vmware如何用
  • win7系统如何重新分区
  • 调整服务能力的策略不包括什么
  • 监控iphone软件
  • u盘启动pe装机工具怎么用
  • winsvc是什么进程
  • window出现问题
  • spyagent4.exe - spyagent4是什么进程
  • 电脑开机黑屏光标闪烁怎么解决
  • win7系统如何提升开关机速度
  • 远程控制安全
  • 惠普笔记本重装系统后没有无线连接
  • win10蓝屏故障
  • win7 64位系统重装后无线信号找不到的原因分析以及解决方法
  • cocos2d官网
  • 记住密码自动登录 会更新登陆信息吗
  • cocos2dx 2.2.2
  • nodejs安装在c盘好还是d盘好
  • Android 摄像头预览卡顿
  • hadoop有几个版本
  • vue数组里面添加数组
  • js面向对象的原理
  • jquery cookie存取
  • 自动寻路小说
  • jquery插件大全
  • 个人所得税完税证明怎么开具
  • 进口哪些情况要交税
  • 广东发票勾选认证操作流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设