jQuery的ready方法实现原理分析


Posted in Javascript onOctober 26, 2016

jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的,首先,我们来看jQuery的代码

DOMContentLoaded = function()
 {
  //取消事件监听,执行ready方法
 if ( document.addEventListener )
 {   
  document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
  jQuery.ready();
 }
  else if ( document.readyState === "complete" ) 
 {
  document.detachEvent( "onreadystatechange", DOMContentLoaded );
  jQuery.ready();
 }
};
jQuery.ready.promise = function( obj ) {
 if ( !readyList ) {

  readyList = jQuery.Deferred();
   //表示页面已经加载完成,直接调用 ready方法
  if ( document.readyState === "complete" ) { 
   //将 jQuery.ready压入异步消息队列,设置延迟时间1毫秒(注意,有些浏览器延迟不能小于4毫秒)
   setTimeout( jQuery.ready); 
  } 
  else if ( document.addEventListener ) //
  {
    //监听DOM加载完成
   document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
    //这里是为了确保所有ready执行结束,如果DOMContentLoaded方法执行了,将有一个状态值 isReady被设置为true,因此,
    //ready方法一旦执行,那么将只执行一次,window.addEventListener中的ready 将被 return 中断
   window.addEventListener( "load", jQuery.ready, false );
 
  } else {
   //低版本的IE浏览器
   document.attachEvent( "onreadystatechange", DOMContentLoaded );
   window.attachEvent( "onload", jQuery.ready );

   var top = false;

   try {
    top = window.frameElement == null && document.documentElement;
   } catch(e) {}

   if ( top && top.doScroll ) //剔除iframe的成分
   {
    (function doScrollCheck() {
     if ( !jQuery.isReady ) {

      try {
       //根据bug来兼容低版本的IE http://javascript.nwbox.com/IEContentLoaded/
       top.doScroll("left");
      } catch(e) {
       //由于低版本的IE 浏览器,onreadystatechange事件不可靠,因此需要根据各个bug来判断页面是否已加载完成
       return setTimeout( doScrollCheck, 50 ); 
      }

      jQuery.ready();
     }
    })();
   }
  }
 }
 return readyList.promise( obj );
};
ready: function( wait )
 {

 if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) { 
  //判断页面是否已完成加载并且是否已经执行ready方法
  return;
 }


 if ( !document.body ) {
  return setTimeout( jQuery.ready );
 }

  
 jQuery.isReady = true; //指示ready方法已被执行

  
 if ( wait !== true && --jQuery.readyWait > 0 ) {
  return;
 }

  
 readyList.resolveWith( document, [ jQuery ] );

  
 if ( jQuery.fn.trigger ) {
  jQuery( document ).trigger("ready").off("ready"); 
 }
},

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript之AJAX框架使用说明
Apr 24 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
video.js使用改变ui过程
Mar 05 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 #Javascript
BootStrap tab选项卡使用小结
Aug 09 #Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 #Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 #Javascript
BootStrap modal模态弹窗使用小结
Oct 26 #Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 #Javascript
BootStrap tooltip提示框使用小结
Oct 26 #Javascript
You might like
PHPlet在Windows下的安装
2006/10/09 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
jcrop基本参数一览
2013/07/16 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
python assert的用处示例详解
2019/04/01 Python
python实现机器人卡牌
2019/10/06 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
要账委托书范本
2014/09/15 职场文书
公务员考察材料
2014/12/23 职场文书
大学推普周活动总结
2015/05/07 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android