jQuery 的 ready()的纯js替代方法


Posted in Javascript onNovember 20, 2016

ready 方法是 jQuery 实现的在 html 页面在 DOM(Document Object Model, 文档对象模型) 树完全加载完成后触发的一个方法. 因为它接收的方法在页面中所有的 DOM 都可访问时才执行, 所以此时你完全可以访问和操作 html 中的元素.

在 jQuery 3.0 之前, 典型的匿名函数方式的用法如下:

$(document).ready(function() {
 // 在 .ready() 被触发时执行.
});

在 jQuery 3.0 中 ready() 的变化

在 jQuery 3.0 发布之前, 有以下几种 ready 方法的使用方式:

在 document 对象上: $(document).ready(handler);

在一个空元素上: $().ready(handler);

或直接使用 (即: 不在一个指定的元素上): $(handler);

以上的几种方式是等价的. 传入的 handler 会在页面所有的 DOM 都加载完成后执行, 不管它被哪个指定元素执行. 也就是, 在 image 元素 $("img") 与 document 对象上调用 ready 方法不表明要等待这些元素加载完成后就触发 handler, 而是在整个 DOM 树加载完成后才触发.

在 jQuery 3.0 中, 除了 $(handler); 方法其它的都被弃用了. 官方的理由是:

因为这个选择与 .ready() 方法的行为没有关系, 它是低效的并且会误导用户猜测这个方法的行为.

Ready 和 Load 事件的不同点

ready 事件在页面 DOM 完全加载后触发并能正确的访问到元素. 而 load 事件在页面 DOM 及资源文件(图片,视频等)都加载完成后才触发.

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

$(window).on("load", function(){
 // 当页面所有资源(图片,视频等)全加载完成后才加载执行
});

这会等待 DOM 加载完成以及图片加载完成(根据图片的大小, 需要加载一定的时间).

对于常规的 DOM 操作你多半不需要 load 事件, 但如果你想做一个等待页面所有资源加载的一个加载效果或者是计算图片的大小时这应该是一个不错的选择.

你可能并不需要 jQuery.ready()

ready 方法确保了其内部的代码都能正确的操作 DOM 元素. 这是什么意思? 当你把 JavaScript 代码放到 HTML 文档中时它会确保回调函数里面的代码在浏览器在已经加载页面中所有的元素时执行:

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>.ready() 教程</title>
  <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
  <script>
   $(function(){ // .ready() 的回调方法, 在 DOM 完全加载完后执行
    var length = $("p").length;
    // 下面会在console控制台中输出 1, 表示有段落 p 存在.
    // 这就证明了这个回调方法在 DOM 完全加载完后执行.
    console.log(length);
   });
  </script>
 </head>
 <body>
  <p>I'm the content of this website</p>
 </body>
</html>

如果你把要执行的 JavaScript 放到 body 元素里面的最后位置, 你就不需要用 ready() 方法把代码包裹在里面了, 因为在 JavaScript 代码执行时页面中所有的元素都已经加载完成, 所以此时你就可以访问或操作元素了:

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>.ready() 教程</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;
   // 下面会在console控制台中输出 1, 表示有段落 p 存在.
   console.log(length);
  </script>
 </body>
</html>

使用原生 JavaScript 替换 ready()
对于现代浏览器, 以及 IE9+, 你可以监听 DOMContentLoaded 事件:

document.addEventListener("DOMContentLoaded", function(){
 // 在 DOM 完全加载完后执行
});

在这里要记住当事件已经触发后回调方法不会执行(页面触发事件后才添加的这个事件监听). 为了确保回调函数始终能执行, jQuery 检测了document 的 readyState 属性(参考), 如果检测出的属性值是 complete 就立即执行回调函数:

var callback = function(){
 // 在 DOM 完全加载完后执行
};

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

你应该始终记得引入 domReady 库, 它已经实现了这个解决方案.

老版本的 IE

对于 IE8 及以下版本, 你可以使用 onreadystatechange 事件来检测 document 的 readyState 属性:

document.attachEvent("onreadystatechange", function(){
 // 检测 DOM 是否加载完全
 if(document.readyState === "complete"){
  // 为了确保在之后不会再触发 移除事件监听
  document.detachEvent("onreadystatechange", arguments.callee);
  // 实际处理程序...
 }
});

另外你可以使用 load 事件, 像 jQuery 那样, 这样就可以在所有的浏览器中正确的执行了. 这也导致有一定的时间延迟, 因为它会等所有的资源都加载完成. 记住在这个解决方案中你还是得去检测 readyState, 如上所述, 这是为了确保当事件已经触发后也能执行回调函数.

结论

如果你正在寻找一个原生 JavaScript 来代替 ready 方法你可以通过 DOMContentLoaded 事件来解决. 如果你的系统需要支持 IE 那么你就要确保 DOM 已经加载完全!

Javascript 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 Javascript
JS继承最简单的理解方式
Mar 31 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 #Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 #Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 #Javascript
js 定位到某个锚点的方法
Nov 19 #Javascript
js 模仿锚点定位的实现方法
Nov 19 #Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 #Javascript
js 中获取制定的cook信息实现方法
Nov 19 #Javascript
You might like
重置版游戏视频
2020/04/09 魔兽争霸
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
为什么需要版本控制
2016/10/28 面试题
超市中秋节促销方案
2014/03/21 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
询价采购方案
2014/06/09 职场文书
公司授权委托书范文
2014/08/02 职场文书
婚礼答谢词
2015/01/04 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python