提取JQuery的ready()方法来单独使用

如何实现加载DOM时执行js代码
服务器君一共花费了151.959 ms进行了4次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

有一些功能需求,需要在DOM载入时马上执行一些函数,但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了。

大家可以使用windows.onload事件,但onload在看来,就是页面上的东西(img,iframe等资源)全部都加载完毕后才能发生,如果页面内有大的图片的话,会在页面展现后好久时间后才执行。

如果只需要对DOM进行操作,那么这时就没必要等到页面全部加载了。我们需要更快的方法。Firefox有DOMContentLoaded事件可以轻松解决,可惜的就是IE没有。

MSDN关于JSCRIPT的一个方法有段不起眼的话,当页面DOM未加载完成时,调用doScroll方法时,会产生异常。那么我们反过来用,如果不异常,那么就是页面DOM加载完毕了。所以 对于Mozilla & Opera 浏览器,在dom树载入后有现成的 DOMContentLoaded 事件。对于Safari 浏览器,有document.onreadystatechange事件,当该触发时,如果 document.readyState=complete时,可视为dom树已经载入。

对于ie,当在iframe内时,同样有document.onreadystatechange事件,对于ie在非iframe内时,只有不断地通过能否执行doScroll判断dom是否加载完毕。

在本例中每间隔5毫秒尝试去执行 document.documentElement.doScroll('left')。在ie8下,貌视非iframe窗口也会有document.onreadystatechange事件,另外你也可以在构建自己的框架时使用此函数。

(function(){
	var isReady=false; //判断onDOMReady方法是否已经被执行过
	var readyList= [];//把需要执行的方法先暂存在这个数组里
	var timer;//定时器句柄
	
	ready=function(fn) 
	{
		if (isReady )
			fn.call( document);
		else
			readyList.push( function() { return fn.call(this);});
		return this;
	}
	var onDOMReady=function(){
		for(var i=0;i< readyList.length;i++)
		{
			readyList[i].apply(document);
		}
		readyList = null;
	}
	var bindReady = function(evt)
	{
		if(isReady) return;
		isReady=true;
		onDOMReady.call(window);
		if(document.removeEventListener)
		{
			document.removeEventListener("DOMContentLoaded", bindReady, false);
		}
		else if(document.attachEvent)
		{
			document.detachEvent("onreadystatechange", bindReady);
			if(window == window.top){
				clearInterval(timer);
				timer = null;
			}
		}
	};
	if(document.addEventListener){
		document.addEventListener("DOMContentLoaded", bindReady, false);
	}
	else if(document.attachEvent)
	{
		document.attachEvent("onreadystatechange", function(){
			if((/loaded|complete/).test(document.readyState))
			bindReady();
		});
	if(window == window.top)
	{
		timer = setInterval(function(){
			try
			{
				isReady||document.documentElement.doScroll('left');//在IE下用能否执行doScroll判断 dom是否加载完毕
			}
			catch(e)
			{
				return;
			}
			bindReady();
		},5);
	}
	}
})();

使用方法如下:

ready(dosomething);//dosomething为已存在的函数
//也可以通过闭包来使用
ready(function(){
	//这里是逻辑代码
});

本文地址:http://www.nowamagic.net/librarys/veda/detail/1598,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/1598

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《计算机程序的构造和解释(原书第2版)》 艾伯森 (译者), 裘宗燕 (译者), 等 (译者)

《计算机程序的构造和解释》(原书第2版)1984年出版,成型于美国麻省理工学院(MIT)多年使用的一本教材,1996年修订为第2版。在过去的二十多年里,《计算机程序的构造和解释》(原书第2版)对于计算机科学的教育计划产生了深刻的影响。第2版中大部分重要程序设计系统都重新修改并做过测试,包括各种解释器和编译器。作者根据其后十余年的教学实践,还对其他许多细节做了相应的修改。《计算机程序的构造和解释》(原书第2版)自出版以来,世界各地已有100多所院校采用《计算机程序的构造和解释》(原书第2版)做教材,其中包括美国斯坦福大学、美国普林斯顿大学、英国牛津大学、日本东京大学等。

更多计算机宝库...