- 浏览: 24122 次
- 性别:
- 来自: 北京
最新评论
- 为什么会有ready函数
在javascript中有window.onload函数,但是这个函数是在页面所有元素都加载完毕才执行的。而图片加载通常需要很长时间,这个ready函数就是可以让javascript函数在图片加载完毕前执行的方法。
通常我们需要操作HTML文档时必须要浏览器将文档模型对象加载完毕才能操作, $(document).ready(fn)d的含义就是 检测DOM对象模型是否加载完毕。
- 通常如何判断
对于非IE浏览器通过监听事件DOMContentLoaded就可以了。
对于IE浏览器通常有两种方法
1. 检测onreadystatechange事件
2. 不断地检测documentElement.doScroll()方法是否可以安全执行
- jQuery中如何实现
1. ready(fn) 提供给外界的绑定事件的借口。
源码展示:
ready: function( fn ) { jQuery.bindReady(); //添加监听函数 if ( jQuery.isReady ) { //如果dom加载完成了 fn.call( document, jQuery ); //立刻执行函数 } else if ( readyList ) { readyList.push( fn ); //否则把函数添加进readyList } return this; },
2. jQuery.ready() 执行绑定的函数队列
jQuery.ready
ready: function() { if ( !jQuery.isReady ) { if ( !document.body ) { return setTimeout( jQuery.ready, 13 ); } jQuery.isReady = true; //设置isReady if ( readyList ) { var fn, i = 0; while ( (fn = readyList[ i++ ]) ) { fn.call( document, jQuery ); } readyList = null; } if ( jQuery.fn.triggerHandler ) { jQuery( document ).triggerHandler( "ready" ); } } }
3. bindReady() 绑定事件监听器的方法 屏蔽了浏览器的差异
看看bindReady的实现
bindReady: function() { if ( readyBound ) { //默认为false return; } readyBound = true; if ( document.readyState === "complete" ) { return jQuery.ready(); } if ( document.addEventListener ) { document.addEventListener("DOMContentLoaded",DOMContentLoaded, false ); window.addEventListener( "load", jQuery.ready, false ); } else if ( document.attachEvent ) { document.attachEvent("onreadystatechange", DOMContentLoaded); window.attachEvent( "onload", jQuery.ready ); var toplevel = false; try { toplevel = window.frameElement == null; } catch(e) {} if ( document.documentElement.doScroll && toplevel ) { doScrollCheck(); } } }
4. doScrollCheck() 为IE浏览器测试的方法
doScrollCheck
function doScrollCheck() { if ( jQuery.isReady ) { return; } try { document.documentElement.doScroll("left"); } catch( error ) { setTimeout( doScrollCheck, 1 ); return; } //不停的执行document.documentElement.doScroll("left") jQuery.ready(); }
4. DOMContentLoaded() 移除了绑定的DOMContentLoaded监听器,并且调用jQuery.ready()方法
源码展示:
DOMContentLoaded = function() { document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); jQuery.ready(); };
参考下面文章:
发表评论
-
HTTP Get和Post
2011-08-31 00:00 0Http定义了与服务器交互的不同方法,最基本的方法有4种,分别 ... -
JavaScript中的继承
2011-04-24 13:11 747JavaScript中实现继承可以有三种方式: 1.类式继 ... -
JavaScript中的对象和封装
2011-04-24 13:11 754在JavaScript中创建对象 1. 字面常量法 ... -
JavaScript中的类型检验
2011-03-30 17:38 807JavaScript中的常见类型: number strin ... -
W3C DOM2 样式规范
2011-03-19 22:35 01 几个常用的对象 ... -
JavaScript中的setTimeout和setInterval
2011-07-17 16:28 12301. 两个函数各自的意义 setTimeout (fu ... -
jQuery中的数据缓存
2011-01-12 16:24 0jQuery中提供了data方法将一些数据与DOM节点进 ... -
JavaScript中的浏览器检测
2010-12-15 15:08 0对于浏览器的检验通常有两种方法: 1. 能力检测方法 ... -
JavaScript中的正则表达式
2011-07-15 20:23 708一 定义一个正则表达式 : 两种表达方式: ... -
浏览器兼容性
2010-12-13 20:45 0产生兼容性问题的原因: 浏览器工作模式的缘由: ... -
jQuery的DOM操作和css变化
2010-12-12 16:01 0分析jQuery中对DOM节点操作提供的方法和 css操作提 ... -
jQuery中的动画分析
2010-12-12 16:00 0源码基本分析jQuery的动画效果的实现 原理 ... -
jQuery中的css选择器分析
2010-12-12 15:59 0Sizzle选择器的优化是:一般的选择器都是按照 ... -
jQuery中的Event模块
2010-12-12 15:58 0定义了jquery.event对象 jquery.ev ... -
jQuery对象构造
2010-12-12 15:57 0主要分析 jQuery这个对象的构造 init函数 -
CSS学习总结
2010-12-12 14:39 0对于css可以分成两部分学习 css 选择器 : ... -
IE中的内存泄露
2010-12-10 22:20 1064JavaScript在IE中的内存泄露一共有四种情况: 首 ...
相关推荐
本文深入分析jQuery的ready函数是如何工作的。分享给大家供大家参考,具体如下: jQuery 是一个伟大的脚本库,由 John Resig 在 2006年1月的BarCamp NYC上释出第一个版本。你可以在 http://jquery.com/ 下载到最新...
主要介绍了jquery中ready函数与[removed]函数的区别,别讲解了他们各自执行的时机,通俗易懂,需要的朋友可以参考下。
JQuery的ready函数与JS的onload的区别:1.执行时间[removed]必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 2.编写个数不同[removed]不能...
然后在页面中也需要用到$().ready函数,这下好了: 虽然jQuery本身的设计还算不错,document加载完成后会依次触发各个ready中定义的function(这一点很好,不象javascript中默认后面的同名函数会覆盖前面的函数定义)...
jquery的ready()实现的是 ...看下ready函数的代码就什么都清楚了。下面的代码加上了注释: // Handle when the DOM is ready ready: function() { // Make sure that the DOM is not already loaded if ( !jQuer
想必大家对jquery的ready函数、css函数、text()并不陌生吧,其实很好理解的,接下来有个不错的示例,如果你对此理解还是很模糊可以参考下
jQuery的ready函数为我们编写打开页面时运行的脚本提供了方便,让我们不必再关注什么[removed]之类的事件,但是最近发现自己之前写的代码有点滥用这个函数了。
ready 方法是 jQuery 实现的在 html 页面在 DOM(Document Object Model, 文档对象模型) 树完全加载完成后触发的一个...在 jQuery 3.0 中 ready() 的变化 在 jQuery 3.0 发布之前, 有以下几种 ready 方法的使用方式:
setTimeout()从载入后延迟指定的时间去执行一个表达式或者是函数;仅执行一次 ;和window.clearTimeout一起使用.我在 代码如下:$(document).ready(function(){setTimout(test(),200); function test() { alert(1&#...
所以相对来说jquery的ready可以提高网页的响应速度; jquery:ready的标准写法: 代码如下: $(document).ready(function() { alert(“加载结束”)... ready函数的一个主要作用就是为dom对象注册事件: 代码如
最近看一些关于jquery ready 有人说他缓慢,有人说他快,说法不一。 于是自己深入研究一下。首先看了一下jquery 文档 关于ready 的描述 While JavaScript provides the load event for executing code when a page ...
Jquery库提供了一个非常方便好用的函数( $(selector).ready()),让我们可以在页面的dom加载完后就可以做相应的操作(当然,这还得看用户浏览器的支持).,而不用等待全部元素加载完成.例如: $(document).ready(function ...
jQuery()选择器、函数、方法,jQuery()选择器、函数、方法一览
一、ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的源码,涉及到的模块比较多,(水平有限)代码比较难看懂;自己结合了一些书籍内容,总结一下。...