简明现代魔法 -> JQuery -> JQuery 学习:ready 事件

JQuery 学习:ready 事件

2010-04-19

访问 HTML 文档的元素,必须先载入文档对象模型(DOM)。当 window.onload 函数执行的时候,说明所有东西已经载入,包括图像和横幅等等。要知道较大的图片下载速度会比较慢,因此用户必须等待大图片下载完毕才能看到 window.onload() 执行的代码效果,这样就花费了很长的等待时间,这不是我们想要的。

对于此,jquery 提供了一个"ready"事件,你可以使用以下的代码片段:

$(document).ready(function(){
	alert("Hello Nowamagic!");
});

$(document)意思是说,获取整个网页文档对象(类似的于window.document),$(document).ready意思就是说,获取文档对象就绪的时候。

上面这段代码的意思是检查文档对象直到它能够允许被操作,这样做比 window.onload() 函数要快的多,因为只要文档对象载入完成就能够执行代码了,而不需要等待页面中的图片下载是否已经完成,这正是我们想要的。之所以用这个来取代 window.onload,就是因为它是在 dom 模型加载完成后就执行,而 window.onload 是在 dom 元素加载完全后才执行。

我们都知道,很多时候,在页面加载完后都需要做一些相应的初始化动作。例如,运行某些Js特效,设置表单等等。怎么知道页面加载完了呢?一般情况下都是设置 body 标签的 onload 监听 window 的 load 事件。但 load 事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了。JQuery 库提供了一个非常方便好用的函数( $(selector).Ready()),让我们可以在页面的 dom加载完后就可以做相应的操作(当然,这还得看用户浏览器的支持),而不用等待全部元素加载完成。例如:

$(document).ready(function (){ alert('Use In Page Script Tag') });
$(document).ready(function (){ alert('Use In Import Js File') });

现在让我们来研究一下这个函数的实现原理:在 JQuery 脚本加载的时候,会设置一个 isReady 的标记,监听 DOMContentLoaded 事件(这个不是什么浏览器都有的,不同浏览器,JQuery运作方式不一样)。当然遇到调用 ready 函数的时候,如果 isReady 未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行。

Jquery中的详细代码分析:

ready: function(fn) {  
	// 绑定监听器  
	bindReady();  
	// 如果 DOM 加载完成  
	if ( JQuery.isReady )  
	// 马上运行此函数  
	fn.call( document, JQuery );  
	// 否则保存起来  
	else  
	// 把函数加入缓存数组中  
	JQuery.readyList.push( function() { return fn.call(this, JQuery); } );  
	return this;  
}
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们