javascript之自定义js封装库兼容主流浏览器实现DOM加载之后,页面完全加载之前执行js

本文介绍了一个自定义的tool.js文件，该文件包含了浏览器检测功能和自定义事件封装。通过这些工具，可以在DOM加载完成后执行特定的JavaScript代码，但又在页面所有资源加载完成之前。适用于不同版本的浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面实现如何在图片等外部资源加载之前执行js代码，接下来自定义一个tool.js文件,里面包含自定义事件封装和浏览器检测：

//页面打开的时候执行
(function () {
	
	window.sys = {};											//让外部可以访问，保存浏览器信息对象
	var ua = navigator.userAgent.toLowerCase();	//获取浏览器信息字符串
	var s;															//浏览器信息数组，浏览器名称+版本

	//alert(ua);
	//alert(ua.match(/msie ([\d.]+)/));			//msie 7.0,7.0
	//alert(ua.match(/firefox\/([\d.]+)/));		//firefox/3.6.28,3.6.28
	//alert(ua.match(/chrome\/([\d.]+)/));
	//alert(window.opera.version());
	//alert(ua.match(/opera\/.*version\/([\d.]+)/));
	//alert(ua.match(/version\/([\d.]+).*safari/));
	
	
	(s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[1] :
	(s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox = s[1] :
	(s = ua.match(/chrome\/([\d.]+)/)) ? sys.chrome = s[1] : 
	(s = ua.match(/opera\/.*version\/([\d.]+)/)) ? sys.opera = s[1] : 
	(s = ua.match(/version\/([\d.]+).*safari/)) ? sys.safari = s[1] : 0;
	
	if (/webkit/.test(ua)) sys.webkit = ua.match(/webkit\/([\d.]+)/)[1];
})();


//Dom加载执行
function addDomLoaded(fn){
	var isReady=false;//用来标示是否已经执行setInterval方法
	var timer=null;//用来标记定时器，在删除定时器的时候可以使用

	function doReady(){
		if(timer) clearInterval(timer);//定时器存在，清除定时器
		if(isReady) return;//如果已经执行过，，下面不用执行
		isReady=true;
		fn();
	}

	if((sys.opera && sys.opera < 9) || (sys.firefox && sys.firefox < 3) || (sys.webkit && sys.webkit < 525)){//非主流浏览器的低版本的dom加载
		/*第一种方式
		timer=setInterval(function(){//定时的检测
			if(/loaded|complete/.test(document.readyState)){
				doReady();//在定义一个函数方便管理该定时器,loaded是部分加载，有可能只是DOM加载完毕，complete是完全加载，类似于onload
			}
		},1);*/

		//第二种方式
		timer=setInterval(function(){
			if(document&&document.getElementById&&document.getElementsByTagName&&document.body){
				doReady();
			}
		},1);
	}else if(document.addEventListener){//w3c标准的浏览器，谷歌，火狐等
		addEvent(document,"DOMContentLoaded",function(){//Dom加载的时候执行
			fn();//执行函数
			removeEvent(document,"DOMContentLoaded",arguments.callee);//arguments,callee返回是当前的匿名函数
		});
	}else if(sys.ie && sys.ie < 9){//IE9以下的浏览器
		timer=setInterval(function(){
			try {
				document.documentElement.doScroll('left');
				doReady();
				}catch(e){}
		},1);
	}
}


/*		
		//实现累加，并且清晰的指出是专给addEvent用的
		//JS一切皆为对象，所以addEvent.ID语法正确，实际上是个全局变量
		alert(addEvent.ID);
		addEvent.ID++;
		
		
*/
//添加事件（obj：事件对象,type：事件类型（如：click，load等）,fn：事件处理函数）
function addEvent(obj,type,fn){
	if(typeof obj.addEventListener!="undefined"){//w3c
		 obj.addEventListener(type,fn,false);//false表示不捕获
	}else{//IE
		//创建一个存放事件的哈希表(散列表)
		if (!obj.events) obj.events = {};
		//第一次执行时执行
		if (!obj.events[type]) {	
			//创建一个存放事件处理函数的数组
			obj.events[type] = [];
			//把第一次的事件处理函数先储存到第一个位置上
			if (obj['on' + type]) obj.events[type][0] = fn;
		} else {
			//同一个注册函数进行屏蔽，不添加到计数器中
			if (addEvent.equal(obj.events[type], fn)) return false;
		}
		//从第二次开始我们用事件计数器来存储
		obj.events[type][addEvent.ID++] = fn;
		//执行事件处理函数
		obj['on' + type] = addEvent.exec;
	}
}

//为每个事件分配一个计数器
addEvent.ID = 1;


//执行事件处理函数
addEvent.exec = function (event) {
	var e = event || addEvent.fixEvent(window.event);
	var es = this.events[e.type];
	for (var i in es) {
		es[i].call(this, e);
	}
};

//同一个注册函数进行屏蔽
addEvent.equal = function (es, fn) {
	for (var i in es) {
		if (es[i] == fn) return true;
	}
	return false;
}

//把IE常用的Event对象配对到W3C中去
addEvent.fixEvent = function (event) {
	event.preventDefault = addEvent.fixEvent.preventDefault;
	event.stopPropagation = addEvent.fixEvent.stopPropagation;
	return event;
};

//IE阻止默认行为
addEvent.fixEvent.preventDefault = function () {
	this.returnValue = false;
};

//IE取消冒泡
addEvent.fixEvent.stopPropagation = function () {
	this.cancelBubble = true;
};


//跨浏览器删除事件
function removeEvent(obj, type, fn) {
	if (typeof obj.removeEventListener != 'undefined') {
		obj.removeEventListener(type, fn, false);
	} else {
		for (var i in obj.events[type]) {
			if (obj.events[type][i] == fn) {
				delete obj.events[type][i];
			}
		}
	}
}

demo.html页面：

<!DOCTYPE html>
<html>
<head>
	 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="Base.js"></script>
	<script type="text/javascript" src="demo.js"></script>
	<script type="text/javascript">
	</script>
</head>
	<body>	
		 <div id="box">box
		</div>
		<img
src="http://h.hiphotos.baidu.com/album/s%3D1600%3Bq%3D100/sign=0686e4a05982b2b7a39f3
dc2019df09e/d01373f082025aaf03cd026ffbedab64024f1a92.jpg"></img>



	</body>
</html>

下面是执行的js代码：

//会在Dom加载之后，页面完全加载完毕之前执行

addDomLoaded(function () {
	var box = document.getElementById('box');
	alert(box.innerHTML);
});