jQuery中的ready函数

最新推荐文章于 2023-05-27 01:36:39 发布

原创最新推荐文章于 2023-05-27 01:36:39 发布 · 469 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #IE #浏览器 #JavaScript #HTML #ViewUI

学习记录专栏收录该内容

7 篇文章

订阅专栏

本文解析了JavaScript中的ready函数，探讨了其在DOM加载未完成时即执行的优势，以及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;
	  },

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://www.iteye.com/topic/818329#1767310