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


Posted in Javascript onNovember 08, 2016

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

$(document).ready(function() {
 // Handler for .ready() called.
});

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和所有资源加载后触发。

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

$(window).on("load", function(){
 // Handler when all assets (including images) are loaded
});

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

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

你可能不需要jQuery.ready()

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

就像下面这个例子一样:

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>.ready() tutorial</title>
 <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
 <script>
  $(function(){ // .ready() callback, is only executed when the DOM is fully loaded
  var length = $("p").length;
  // The following will log 1 to the console, as the paragraph exists.
  // This is the evidence that this method is only called when the
  // DOM is fully loaded
  console.log(length);
  });
 </script>
 </head>
 <body>
 <p>I'm the content of this website</p>
 </body>
</html>

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

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>.ready() tutorial</title>
 </head>
 <body>
 <p>I'm the content of this website</p>
 <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
 <script>
  var length = $("p").length;
  // The following will log 1 to the console, as the paragraph exists.
  console.log(length);
 </script>
 </body>
</html>

原生JavaScript ready()替代

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

document.addEventListener("DOMContentLoaded", function(){
 // Handler when the DOM is fully loaded
});

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

var callback = function(){
 // Handler when the DOM is fully loaded
};

if (
 document.readyState === "complete" ||
 (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
 callback();
} else {
 document.addEventListener("DOMContentLoaded", callback);
}

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

老版本的IE浏览器

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

document.attachEvent("onreadystatechange", function(){
 // check if the DOM is fully loaded
 if(document.readyState === "complete"){
 // remove the listener, to make sure it isn't fired in future
 document.detachEvent("onreadystatechange", arguments.callee);
 // The actual handler...
 }
});

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

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

总结

以上就是这篇文章的全部内容了,如果你正在寻找一种原生js替代ready方法,你可以结合DOMContentLoaded事件一起处理。如果你的系统需要兼容IE话,你要确保DOM加载完成。希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
jQuery文字轮播特效
Feb 12 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
bootstrap fileinput完整实例分享
Nov 08 #Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 #Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 #Javascript
Javascript数组循环遍历之forEach详解
Nov 07 #Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 #Javascript
jQuery webuploader分片上传大文件
Nov 07 #Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 #Javascript
You might like
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
php实现记事本案例
2020/10/20 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
Python进度条的制作代码实例
2019/08/31 Python
使用Python实现画一个中国地图
2019/11/23 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
关于python中导入文件到list的问题
2020/10/31 Python
python动态规划算法实例详解
2020/11/22 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
什么是View State?
2013/01/27 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
综合测评自我鉴定
2013/10/08 职场文书
医院实习介绍信
2014/01/12 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
机关出纳岗位职责
2014/04/03 职场文书
教师评语大全
2014/04/28 职场文书
庆六一活动总结
2014/08/29 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
Python正则表达式中flags参数的实例详解
2022/04/01 Python
如何优化vue打包文件过大
2022/04/13 Vue.js