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 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
详解Vue单元测试case写法
May 24 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
JS实现百度搜索框关键字推荐
Feb 17 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
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
php四种定界符详解
2017/02/16 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
js取得url地址参数实例
2013/02/22 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
利用python计算时间差(返回天数)
2019/09/07 Python
python做接口测试的必要性
2019/11/20 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
基于opencv实现简单画板功能
2020/08/02 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
python3中确保枚举值代码分析
2020/12/02 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
水污染治理工程专业求职信
2014/06/14 职场文书
水电工程师岗位职责
2015/02/13 职场文书
学习保证书100字
2015/02/26 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL