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 相关文章推荐
window.parent与window.openner区别介绍
Apr 12 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
JavaScript手风琴页面制作
May 17 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 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
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
解析php类的注册与自动加载
2013/07/05 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
python二叉树的实现实例
2013/11/21 Python
python控制台显示时钟的示例
2014/02/24 Python
python实现获取序列中最小的几个元素
2014/09/25 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
Django框架模板用法入门教程
2019/11/04 Python
python实现名片管理器的示例代码
2019/12/17 Python
容易被忽略的Python内置类型
2020/09/03 Python
python 获取字典键值对的实现
2020/11/12 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
自荐信格式
2013/12/01 职场文书
季度思想汇报
2014/01/01 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
德育标兵事迹材料
2014/08/24 职场文书
师德师风个人整改措施
2014/10/27 职场文书
2014年技术部工作总结
2014/12/12 职场文书
学术会议通知
2015/04/15 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript