jQuery  ready方法实现原理详解


Posted in Javascript onOctober 19, 2016

今天闲来无事研究研究jQuery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多。

先普及一下jquery.ready()和window.onload,window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发. 

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 相关文章推荐
jQuery之日期选择器的深入解析
Jun 19 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
Javascript实现汉字和拼音互转的终极方案
Oct 19 #Javascript
Javascript typeof与instanceof的区别
Oct 18 #Javascript
javascript self对象使用详解
Oct 18 #Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 #Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 #Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 #Javascript
vue.js表格分页示例
Oct 18 #Javascript
You might like
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
xml+php动态载入与分页
2006/10/09 PHP
JS实现php的伪分页
2008/05/25 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
python和shell变量互相传递的几种方法
2013/11/20 Python
python显示天气预报
2014/03/02 Python
python实现的简单文本类游戏实例
2015/04/28 Python
对Python中range()函数和list的比较
2018/04/19 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
建筑工程自我鉴定
2013/10/18 职场文书
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
校长岗位职责
2013/11/26 职场文书
茶叶生产计划书
2014/01/10 职场文书
团组织关系介绍信
2014/01/12 职场文书
白血病募捐倡议书
2014/05/14 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
杨善洲电影观后感
2015/06/04 职场文书
cf战队宣传语
2015/07/13 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby