基于jQuery v1.8.3

在js与DOM交互之前要确保DOM已经加载构建完成，在jQuery中都是使用
$(fn) 或者$ (document).ready(fn)来确保自己写的代码在DOM构建完成之后执行。
那么jQuery的ready事件内部怎么实现的呢？

通过阅读源码（line:842 ~ 898）知道jQuery内部使用四种判别文档是否加载完成的事件：

DOMContentLoaded 初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载
load 一个页面完全加载之后触发
readyStateChange 文档加载状态（document.readyState）改变的时候触发，当document.readyState === ‘complete’ 为 true 表示文档解析完成。

readyState可能的值有：
```
1. loading 加载2. interactive 互动3. complete 完成
```
doScroll 低版本IE支持的事件，如果调用不出错就表示文档解析完成

部分源码如下：

/**
*先检查一下文档是否加载完成了，如果执行这个方法的时候文档已经加载完成还不知道就尴尬了。。。后面注册的监听文档是否加载完成的事件都不会被触发
*因为我们都知道事件的特性就是错过了就是错过了
*/
if ( document.readyState === "complete" ) {setTimeout( jQuery.ready, 1 );
} else if ( document.addEventListener ) {// 检测是否支持 DOMContentLoaded，该事件这是H5新加的事件，在DOM结构构件完成触发，不会等待资源的下载如IMG等，所以会比window.onload提前触发document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );// 监听onload事件window.addEventListener( "load", jQuery.ready, false );
} else {// 这里是低版本的IE浏览器// 通过attachEvent监听readystatechange和load事件document.attachEvent( "onreadystatechange", DOMContentLoaded );window.attachEvent( "onload", jQuery.ready );// 在顶层不在iframe里面var top = false;try {top = window.frameElement == null && document.documentElement;} catch(e) {}if ( top && top.doScroll ) {(function doScrollCheck() {if ( !jQuery.isReady ) {try {top.doScroll("left");} catch(e) {return setTimeout( doScrollCheck, 50 );}jQuery.ready();}})();}

通过以上源码分析，自己来实现一个完整的

需求：

确保代码会在文档加载完的第一时间被调用

可以正确处理多次调用（调用多次ready(fn); ready(fn)）

(function(window, undefined){// 任务队列var PENDING = 'pending',COMPLETE = 'complete',first = true, // 第一次调用ready方法queue = [],state = PENDING; // pending complatevar obser = {queue: [],fire: function(){while(this.queue.length){this.queue.shift()();}},add: function(fn){this.queue.push(fn);}};function loaded(){// 防止被触发多次if(state === COMPLETE) return;if(document.addEventListener){state = COMPLETE;obser.fire();document.removeEventListener('DOMContentLoaded', loaded, false);window.removeEventListener('load', loaded, false);}else if(document.readyState === 'complete'){// 这里必须要是 document.readyState === 'complate' 才行state = COMPLETE;obser.fire();document.detachEvent('DOMContentLoaded', loaded);window.detachEvent('load', loaded);}}function ready(fn){if(first){// 如果是第一次调用顺待要注册一下事件if(document.readyState === 'complete'){loaded();}else if(document.addEventListener){document.addEventListener('DOMContentLoaded', loaded, false);window.addEventListener('load', loaded, false);}else{// 这里处理IEdocument.attachEvent('onreadystatechange', loaded);window.attachEvent('onload', loaded);}}if(state === COMPLETE){fn();}else{obser.add(fn);}}window.ready = ready;
})(window, undefined);// 之后直接调用ready(fn)即可

jQuery中的ready相关推荐

js中onload和jQuery中的ready区别
js中onload和jQuery中的ready区别 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. ------>不能写多个(如果有多个,只会执行一个) $(do ...
js中window.onload 与 jquery中$(document.ready()) 测试
js中window.onload 与 jquery中$(document.ready())区别,验证代码如下(调换js代码和Jquer代码书写顺序测试,运行结果一样,因此与代码书写位置没关系): &l ...
Jquery中$(document).ready()的作用
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
jquery中的ready方法和window的onload方法的区别
jquery中的ready方法和window.onload的区别区别 jquery的ready方法在网页中的DOM结构加载完成后执行.window.onload()必须等到网页全部加载完毕(包括图片 ...
jquery 中 $(document).ready() 与window.onload 的区别
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
jquery (js中window.onload与jquery中$(document.ready())的区别)
jquery 学习之一(js中window.onload与jquery中$(document.ready())的区别) 耳听为虚,眼见为实.通过下面的实例可查看两者的异同(注意:aa.jpg最好是一张 ...
jQuery中$(document).ready()和window.onload的区别
$(document) ready()和window onload在表面上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document) ready()和window onlo ...
Jquery中$(document).ready(function(){ })函数的使用详解
Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQuery(document).ready ...
jquery中的ready函数与window.onload谁先执行
关于$(document).ready(): jquery中的$(document).ready(),那$(document).ready()到底是什么作用呢?是不是可以用window.onload ...
关于Jquery中 “$(document).ready(function(){ })”函数的使用
Jquery是优秀的Javascrīpt框架,$是jquery库的申明,它很不稳定(我就常遇上),换一种稳定的写法jQuery.noConflict(); jQue ...

jQuery中的ready

通过以上源码分析，自己来实现一个完整的

需求：

jQuery中的ready相关推荐

最新文章

热门文章