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 相关文章推荐
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
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+DBM的同学录程序(3)
2006/10/09 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
vue实现文件上传功能
2018/08/13 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
python实现的jpg格式图片修复代码
2015/04/21 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Python的历史与优缺点整理
2020/05/26 Python
高中生学习的自我评价
2013/12/14 职场文书
幼儿园实习自我鉴定
2013/12/15 职场文书
集团公司人力资源部岗位职责
2014/01/03 职场文书
高中生职业规划范文
2014/03/09 职场文书
租房合同协议书
2014/04/09 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
违纪检讨书
2015/01/27 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
乱世佳人观后感
2015/06/08 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript