jQuery中的ready函数

 

•  为什么会有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;
      },

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" );
        }
    }
}

 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();
                    }
        }
    }

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();
}

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();
    };

DOMContentLoaded = function() {
		document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
		jQuery.ready();
	};

 

     参考下面文章:

     http://www.javaeye.com/topic/818329#1767310