jQuery的ready方法详解


Posted in Javascript onNovember 27, 2014

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"); 

 }

},

总结:

 页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成。(可以说:ready 在onload 前加载!!!)
一般样式控制的,比如图片大小控制放在onload 里面加载;
jS事件触发的方法,可以在ready 里面加载;

Javascript 相关文章推荐
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
JavaScript实现商品评价五星好评
Nov 30 Javascript
javascript 面向对象封装与继承
Nov 27 #Javascript
javascript制作坦克大战全纪录(2)
Nov 27 #Javascript
javascript制作坦克大战全纪录(1)
Nov 27 #Javascript
使用jsonp完美解决跨域问题
Nov 27 #Javascript
JavaScript变量声明详解
Nov 27 #Javascript
js脚本实现数据去重
Nov 27 #Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 #Javascript
You might like
php 求质素(素数) 的实现代码
2011/04/12 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
公开服务承诺制度
2014/03/26 职场文书
教师节班会开场白
2015/06/01 职场文书
遗嘱格式范本
2015/08/07 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL