jquery事件的ready()方法使用详解


Posted in Javascript onNovember 11, 2015

页面初始化中,用的较多的就是$(document).ready(function(){//代码}); 或 $(window).load(function(){//代码});

他们的区别就是,ready是在DOM的结构加载完后就触发,load是在页面内包括DOM结构,css,js,图片等都加载完成后再触发,显然ready更适合作为页面初始化使用。但有时候也不尽然。需要进一步查看其内部机制。

那么ready的内部是如何判断DOM的结构加载完的?并且不同的浏览器的判断是如何的?

答案就在jquery代码内,假设jquery的版本是jquery-1.11.3.js。

ready的关键代码(3507~3566行),关键代码用红色标出:

jQuery.ready.promise = function( obj ) {
  if ( !readyList ) {

    readyList = jQuery.Deferred();

    // Catch cases where $(document).ready() is called after the browser event has already occurred.
    // we once tried to use readyState "interactive" here, but it caused issues like the one
    // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
    if ( document.readyState === "complete" ) {
      // Handle it asynchronously to allow scripts the opportunity to delay ready
      setTimeout( jQuery.ready );

    // Standards-based browsers support DOMContentLoaded
    } else if ( document.addEventListener ) {
      // Use the handy event callback
      document.addEventListener( "DOMContentLoaded", completed, false );

      // A fallback to window.onload, that will always work
      window.addEventListener( "load", completed, false );

    // If IE event model is used
    } else {
      // Ensure firing before onload, maybe late but safe also for iframes
      document.attachEvent( "onreadystatechange", completed );

      // A fallback to window.onload, that will always work
      window.attachEvent( "onload", completed );

      // If IE and not a frame
      // continually check to see if the document is ready
      var top = false;

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

      if ( top && top.doScroll ) {
        (function doScrollCheck() {
          if ( !jQuery.isReady ) {

            try {
              // Use the trick by Diego Perini
              // http://javascript.nwbox.com/IEContentLoaded/
              top.doScroll("left");
            } catch(e) {
              return setTimeout( doScrollCheck, 50 );
            }

            // detach all dom ready events
            detach();

            // and execute any waiting functions
            jQuery.ready();
          }
        })();
      }
    }
  }
  return readyList.promise( obj );
};

上面的代码在触发ready时可以分成两部分

1.标准浏览器下的触发

当浏览器是基于标准浏览器时,会在加载完DOM结构后触发“DOMContentLoaded”事件,jquery内部就用此事件作为ready的触发源。

document.addEventListener( "DOMContentLoaded", completed, false );

2.IE浏览器下的触发

当浏览器是IE浏览器时,因为IE浏览器(蛋疼并强大着)不支持“DOMContentLoaded”事件,所以只能另谋它法,

(function doScrollCheck() {
          if ( !jQuery.isReady ) {

            try {
              // Use the trick by Diego Perini
              // http://javascript.nwbox.com/IEContentLoaded/
              top.doScroll("left");
            } catch(e) {
              return setTimeout( doScrollCheck, 50 );
            }

            // detach all dom ready events
            detach();

            // and execute any waiting functions
            jQuery.ready();
          }
        })();

IE下的做法 就是上面代码的红字处,用“document.documentElement.doScroll("left")”的方法去滚动页面,如果没加载完就等个50毫秒后继续滚,直到滚的动后就触发ready。

但是,如果页面中有frame的场合,会使用window.onload事件作为ready的触发源。

所以在IE下,页面中有frame时,ready也是等到页面内的所有内容加载完成后再触发。

jQuery中ready与load事件的区别

大家在工作中用jQuery的时候一定会在使用之前这样:

//document ready
$(document).ready(function(){
  ...code...
})
//document ready 简写
$(function(){
  ...code...
})

有些时候也会这么写:

//document load
$(document).load(function(){
  ...code...
})

一个是ready一个是load,这两个到底有什么区别呢?今天我们来聊一聊。
ready与load谁先执行:

大家在面试的过程中,经常会被问到一个问题:ready与load那一个先执行,那一个后执行?答案是ready先执行,load后执行。
DOM文档加载的步骤:

要想理解为什么ready先执行,load后执行就要先聊一下DOM文档加载的步骤:

(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load

从上面的描述中大家应该已经理解了吧,ready在第(4)步完成之后就执行了。但是load要在第(6)步完成之后才执行。

ready事件:

ready事件在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来,JS代码一样可以执行。

load事件:

load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话,则就会出现这种情况:网页文档已经呈现出来,但由于网页数据还没有完全加载完毕,导致load事件不能够即时被触发。

总结:

相信大家已经了解了ready与load的区别,其实如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的,但是页面中有文件就不一样了,所以还是推荐大家在工作中用ready。

Javascript 相关文章推荐
js类 from qq
Nov 13 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
js实现搜索提示框效果
Sep 05 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 #Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 #Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 #Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 #Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 #Javascript
js密码强度校验
Nov 10 #Javascript
详解javascript函数的参数
Nov 10 #Javascript
You might like
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
python游戏开发的五个案例分享
2020/03/09 Python
pandas数据拼接的实现示例
2020/04/16 Python
24个canvas基础知识小结
2014/12/17 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
高中生的学习总结自我鉴定
2013/10/26 职场文书
教学器材管理制度
2014/01/26 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
教师网络培训感言
2014/03/09 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
保卫工作个人总结
2015/03/03 职场文书
观看建国大业观后感
2015/06/01 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
奖学金申请书(范文)
2019/08/14 职场文书