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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
vue生命周期实例小结
Aug 15 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 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
PHP调用三种数据库的方法(2)
2006/10/09 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
PHP7 list() 函数修改
2021/03/09 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
python两个list[]相加的实现方法
2020/09/23 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
员工评语大全
2014/01/19 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
爱护草坪标语
2014/06/24 职场文书
好的促销活动方案
2014/08/21 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang