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中的数学函数
Apr 04 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 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 异常处理实现代码
2009/03/10 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
JavaScript 空位补零实现代码
2010/02/26 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
ES6中Set和Map用法实例详解
2020/03/02 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
js 数据类型判断的方法
2020/12/03 Javascript
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
导游实习生自荐书
2014/01/28 职场文书
网络信息安全承诺书
2014/03/26 职场文书
大学生简短的自我评价
2014/09/12 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers