为什么会有ready函数

在javascript中有window.onload函数,但是这个函数是在页面所有元素都加载完毕才执行的。而图片加载通常需要很长时间，这个ready函数就是可以让javascript函数在图片加载完毕前执行的方法。 

        

     通常我们需要操作HTML文档时必须要浏览器将文档模型对象加载完毕才能操作, $(document).ready(fn)d的含义就是   检测DOM对象模型是否加载完毕。

·   通常如何判断

对于非IE浏览器通过监听事件DOMContentLoaded就可以了。 

        对于IE浏览器通常有两种方法

1.  检测onreadystatechange事件

                2.  不断地检测documentElement.doScroll()方法是否可以安全执行

·   jQuery中如何实现

           1.  ready(fn)   提供给外界的绑定事件的借口。

   源码展示: 

Js代码 

1. ready: function( fn ) {  

2.         jQuery.bindReady();  //添加监听函数  

3.   

4.         if ( jQuery.isReady ) { //如果dom加载完成了  

5.             fn.call( document, jQuery );  //立刻执行函数  

6.   

7.         } else if ( readyList ) {  

8.             readyList.push( fn );  //否则把函数添加进readyList  

9.         }  

10.         return this;  

11.       },  

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 

Js代码 

1. ready: function() {  

2.     if ( !jQuery.isReady ) {              

3. 　                    if ( !document.body ) {    

4.             return setTimeout( jQuery.ready, 13 );   

5.         }  

6.         jQuery.isReady = true;  //设置isReady  

7.         if ( readyList ) {  

8.             var fn, i = 0;  

9.             while ( (fn = readyList[ i++ ]) ) {  

10.                 fn.call( document, jQuery );     

11.             }  

12.             readyList = null;  

13.                 }  

14.   

15.     if ( jQuery.fn.triggerHandler ) {    

16.             jQuery( document ).triggerHandler( "ready" );  

17.         }  

18.     }  

19. }  

 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的实现 

Js代码 

1. bindReady: function() {  

2.     if ( readyBound ) {  //默认为false  

3.         return;  

4.     }  

5. 　　readyBound = true;  

6.   

7. if ( document.readyState === "complete" ) {    

8.         return jQuery.ready();    

9.     }  

10.     if ( document.addEventListener ) {      document.addEventListener("DOMContentLoaded",DOMContentLoaded, false );   

11.     window.addEventListener( "load", jQuery.ready, false );    

12.     } else if ( document.attachEvent ) {    

13.  document.attachEvent("onreadystatechange", DOMContentLoaded);     

14.         window.attachEvent( "onload", jQuery.ready );    

15.         var toplevel = false;  

16. 　　           try {  

17.             toplevel = window.frameElement == null;    

18.         } catch(e) {}  

19.             if ( document.documentElement.doScroll && toplevel ) {  

20.                 doScrollCheck();   

21.                     }  

22.         }  

23.     }  

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 

Js代码 

1. function doScrollCheck() {  

2.     if ( jQuery.isReady ) {  

3.         return;  

4.     }  

5.   

6.     try {  

7.         document.documentElement.doScroll("left");  

8.     } catch( error ) {  

9.         setTimeout( doScrollCheck, 1 );     

10.         return;  

11.     }  

12.     //不停的执行document.documentElement.doScroll("left")  

13.     jQuery.ready();  

14. }  

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()方法 

           

           源码展示: 

Js代码 

1. DOMContentLoaded = function() {  

2.         document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );  

3.         jQuery.ready();  

4.     };  

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