浏览器DOMContentLoaded与load事件代码

DOMContentLoaded

DOMContentLoaded 事件发生在最初的 HTML 文档被加载和解析之后，此时 css 样式表、图片等资源以及其它子窗口( frame )加载与否与此无关。

function docReady(fn){
	if(document.addEventListener){
		document.addEventListener('DOMContentLoaded',function(){
			//	触发了就移除 DOMContentLoaded 事件监听
			document.removeEventListener('DOMContentLoaded', arguments.callee, false);
			
			fn();	//	执行
		},false);
	}
	
	//	兼容IE
	//	else if(document.attachEvent){
	else{
		//	确保当前页面在 iframe 中加载时，事件依旧被安全触发
		//	document.attachEvent('onreadystatechange', function(){
			//	if(document.readyState == 'complete'){
				//	触发了就移除 onreadystatechange 监听
				//	document.detachEvent('onreadystatechange', arguments.callee);
				
				//	fn();	//	执行
			//	}
		//	});
		
		//	如果是 IE 且不在 iframe 中时，轮询调用 doScroll 方法监测 DOM 是否加载完毕
		//	if(document.documentElement.doScroll && typeof window.frameElement === 'undefined' ){
			try{
				document.documentElement.doScroll('left');
			}
			catch(error){
				return setTimeout(arguments.callee, 20);
			};
				
			fn();
		//	}
	}
}

docReady(function(){
	//	html 加载和解析后执行的代码
});

arguments.callee 属性包含当前正在执行的函数。

目前 arguments.callee 已经从ES5严格模式中删除

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。


addEventListener() 是 W3C DOM 规范中提供的注册事件监听器的方法

IHTMLElement2::attachEvent is no longer supported. Starting with
Internet Explorer 11, use IEventTarget::addEventListener.

Document.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如HTML文档的 元素）。

window.frameElement 返回嵌入当前window对象的元素(比如 或者 ),如果当前window对象已经是顶层窗口,则返回null.

IE浏览器里最早的解决方案是绑定document.onreadystatechange事件，判断readyState是否为complete，但是当页面有iframe时就无法及时触发了

load

load 事件是在整个页面被加载了之后触发的，此时所有独立的资源比如 css样式表、图片以及其它所需要的资源都已加载。

window.onload = function(){
	//	full page loaded
};