位置: 编程技术 - 正文

jQuery的Read()方法代替原生JS详解(jquery onready)

编辑:rootadmin

推荐整理分享jQuery的Read()方法代替原生JS详解(jquery onready),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery的ready方法,jquery的ready方法,jquery(document).ready,jquery中的ready函数,jquery onready,jquery中的ready函数,jquery中的ready函数,jquery的ready方法,内容如对您有帮助,希望把文章链接给更多的朋友!

在jQuery 3.0的版本前, ready经典用法是用一个匿名函数,像这样:

jQuery 3.0 ready() 变化

在jQuery 3.0发布之前,有以下几种方法称之为ready方法:

在document元素上操作: $(document).ready(handler);

在空元素上操作: $().ready(handler);

或者直接(即不在一个具体的元素上)操作: $(handler);

上述所有命名的变种在功能上是等价的。无论是哪个元素,在DOM加载完毕之后其指定的处理程序都将会被调用。换句话说,这里的DOM加载完毕并不表示在文档中的某个具体的元素,比如img元素,加载完毕。相反,这里表示的是整个DOM树加载完毕。

在jQuery 3.0中,除了$(handler) 其他的ready方法都被弃用。

官方声明为此:

这是因为选择器并没有和ready()建立联系,不仅低效而且会导致浏览器引擎对该方法的行为进行不正确的假设。

ready 事件和 load 事件的区别

当DOM加载完毕且元素能够被安全访问时就会触发ready事件。另一方面,load事件却在DOM和所有资源加载后触发。

jQuery的Read()方法代替原生JS详解(jquery onready)

可以像下面这样使用load事件:

这样的话,不仅仅要等到DOM结构能完全访问,而且还需要等到所有的图片资源完全加载完毕(加载时间取决于图片文件大小)才能执行函数。

正常的DOM操作你可能不需要load事件,但是如果你想要在所有的资源被加载完毕之前展示一个旋转的加载器样式,比如,又或者你想要用JS计算一下图片的大小,这可能是一个好的选择。

你可能不需要jQuery.ready()

ready 方法可以确保代码只在所有DOM元素能被安全操纵时才执行。 但这意味着什么呢?这意味着当你要执行的js代码嵌在HTML中某个片段中时,浏览器也要加载完以下元素才能执行。

就像下面这个例子一样:

如果你要执行的javascript代码放在body末尾,你就可能不需要使用ready()方法,因为浏览器解析到javascript时你可能试图操纵和访问的DOM元素已经被加载完了:

原生JavaScript ready()替代

对于现代浏览器以及IE9+,你可以通过监听 DOMContentLoaded 事件实现ready()相同的功能:

但是,请注意,如果事件已经发射,回调将不会被执行。为了确保回调总是运行,jQuery检查文档reference)的“readyState”属性,如果属性值变为 complete,则立即执行回调函数:

包括domReady库,已经实现了这个解决方案。

老版本的IE浏览器

对于IE8及以下的浏览器,你能使用onreadystatechange 事件去监听文档的readyState 属性:

或者你可以使用Load事件,如jQuery,这样可以在任何浏览器上运行。这也会导致一个时间延迟,因为它会等待所有的资产被加载。

注意,在这个解决方案中你也要检查readyState,如上文所述,这样能确保回调总是能够被执行。

总结

标签: jquery onready

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

上一篇:Jquery通过ajax请求NodeJS返回json数据实例

下一篇:jQuery自定义组件(导入组件)(jquery自定义表单)

  • 增值税普通发票需要交税吗
  • 材料抵扣货款怎么写简单协议范本
  • 息税前利润计算每股收益
  • 母公司给子公司注资需要什么手续
  • 出口托收业务
  • 兼职工资如何发放给个人
  • 卷式发票是什么样的
  • 会计记账凭证如何填制
  • 工程销项税率
  • 分配辅助生产车间成本记账凭证
  • 往来款太大怎么处理
  • 2018年债券基金
  • 收到以前年度退所得税分录
  • 简易征收销项税额咋做账
  • 工程劳务公司的生产销售情况分析
  • 借贷记账法的记账规则是
  • 小微企业行业划分标准 工信部
  • cmos电池耗尽
  • 冲暂估成本会计分录怎么做
  • 会计科目发出商品
  • thinkphp5框架介绍
  • 证券公司佣金是买卖都要收吗
  • PHP:Memcached::getMultiByKey()的用法_Memcached类
  • 公司logo设计费入什么科目
  • php include path
  • 合伙养殖需要注意什么
  • 出现巨石
  • yii2开发文档
  • 股权投资取得的收入计入什么科目
  • 基于transformer的文本分类
  • 斯洛文尼亚nba球星是谁
  • php接口验证
  • 货物及劳务包括哪些内容
  • linux rdp客户端
  • 广告费和业务招待费扣除标准中的全年销售收入是指
  • 网上学电脑的软件
  • 收到事业单位分红怎么办
  • 建筑业综合税率13.8%
  • 经营证在哪里办
  • 开一般户需要基本户开户许可证吗
  • 实收资本印花税税率
  • sql2000日志清理
  • 同一控制下企业合并
  • 新准则下交易性金融债券
  • 一般纳税人开劳务发票税率
  • 企业现金清查的主要内容有什么
  • 以前年度未处理往来账怎么叫
  • 收到社保局的生育津贴并付给职工如何入账
  • 土地增值税税率怎么算
  • 售后回租租赁合同买车有效吗
  • 公司打到个人账户的钱算公款吗
  • 小规模纳税人如何缴纳企业所得税
  • 工程费用科目
  • 为什么要计提工资
  • 什么是交易性金融资产?交易性金融资产主要有哪些特点?
  • 小规模印花税怎么报
  • 远程连接局域网电脑
  • win7如何共享文件夹给另一台电脑使用
  • win8最多支持多大内存
  • 新手怎么装
  • driver's
  • icqlite.exe进程的详细介绍 icqlite进程的查询 作用是什么
  • inodecmn.exe
  • 如何配置centos7下的apache服务
  • wysafe.exe是什么
  • linux系统如何禁用光驱
  • 找不到config/index taro
  • cocos lua js
  • opengl mesa
  • perl cgi
  • android自定义view ondraw有时候不执行
  • css兼容浏览器
  • Python实现Mysql数据库连接池实例详解
  • 利用的拼音
  • jquery html函数
  • 置顶是怎么弄的
  • javascript怎么定义二维数组
  • 常见的java数据类型有哪些
  • 季度企业所得税分录
  • 浙江省工伤停工留薪期分类目录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设