- 为什么会有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(); };
参考下面文章: