one-person developer

jQuery ready

window["readyList"] = [];
Ready = function(func) {
	this.isReady = false;
	window["readyList"].push(func);
	
	var Func = function() {
		if(!this.isReady) {
			this.isReady = true;
			var fn, i = 0;
			while(fn = window["readyList"][i++]) {
				fn.call();
			}
			window["readyList"] = [];
		} else {
			if(!document.body) {
				return setTimeout(Func, 13);
			}
		}
	}
	
	var DOMContentLoaded = function() {
		if(document.addEventListener) {
			document.removeEventListener("DOMContentLoaded", DOMContentLoaded, false);
			Func();
		} else {
			if(document.readyState === "complete") {
				document.detachEvent("onreadystatechange", DOMContentLoaded);
				Func();
			}
		}
	}
	
	var ScrollCheck = function() {
		if(this.isReady) {
			return;
		}
	
		try {
			document.documentElement.doScroll("left");
		} catch (error) {
			setTimeout(ScrollCheck, 1);
			return;
		}
	
		Func();
	}
	
	if(document.readyState === "complete" ||  document.readyState === "loaded") {
		Func();
	}
	
	if(document.addEventListener) {
		document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);
		window.addEventListener("load", Func, false);
	} else {
		document.attachEvent("onreadystatechange", DOMContentLoaded);
		window.attachEvent("onload", Func);
		
		var toplevel = false;
		try {
			toplevel = window.frameElement == null;
		} catch(e) {  }
	
		if(document.documentElement.doScroll && toplevel) {
			ScrollCheck();
		}
	}
}

Ready(function() {
	// 실행 할 구문 작성
});
Ready(function() {
	// 실행 할 구문 작성
});
Ready(function() {
	// 실행 할 구문 작성
});

onload, DOMContentLoaded, onreadystatechange, defer, jQuery ready 페이지 로드 테스트

• onload - 개체 로딩이 다 되었을 때 발생한다.
• DOMContentLoaded - html DOM요소가 로딩이 완료되면 발생. 이미지가 로드되기 전에 실행(IE에선 지원 안함)
• onreadystatechange - 개체의 상태(state)가 변경되면 발생된다.(IE, Opera 지원 readyState는 모든 브라우저가 반환)
• uninitialized - 개체가 데이터로 초기화되지 않았다.
• loading - 개체에 데이터가 로딩되고 있다.
• loaded - 개체에 데이터 로딩이 완료되었다.
• interactive - 개체에 데이터가 완전히 로딩되지 않았어도 사용자가 개체에 작용할 수 있다.
• complete - 개체의 초기화가 완료되었다.
• defer - 웹 페이지의 파싱이 완료된 다음 스크립트를 실행한다.(IE전용 HTML5에선 async 속성과 같이 표준속성으로 추가??)
• jQuery ready - html DOM요소가 로딩이 완료되면 발생. 이미지가 로드되기 전에 실행

이벤트 발생 순서 확인

 var time = (new Date()).getTime(); 

 
	if(document.addEventListener) {
		document.addEventListener( "DOMContentLoaded", function() {
			jQuery("#load").append("DOMContentLoaded "+ document.readyState +"<br/>");
			jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +"<br/>");
		}, false);
	} else {
		document.attachEvent("onreadystatechange", function() {
			if(!document.readyState || document.readyState === "complete" || document.readyState === "loaded") {
				jQuery("#load").append("onreadystatechange "+ document.readyState +"<br/>");
				jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +"<br/>");
			}
		});
	}
			
	window.onload = function() {
		jQuery("#load").append("onload "+ document.readyState +"<br/>");
		jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +"<br/>");
	}
			
	jQuery(window).ready(function() {
		jQuery("#load").append("jQuery ready "+ document.readyState +"<br/>");
		jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +"<br/>");
	});

	jQuery("#load").append("defer "+ document.readyState +"<br/>");
	jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +"<br/>");

• IE 6,7,8
• defer interactive
  Time : 34
• jQuery ready interactive
  Time : 45
• onreadystatechange complete
  Time : 48
• onload complete
  Time : 57
• chrome 6.0.472.63
• defer loading
  Time : 23
• jQuery ready loaded
  Time : 24
• DOMContentLoaded loaded
  Time : 25
• onload complete
  Time : 25
• firefox 3.6.9
• jQuery ready interactive
  Time : 76
• DOMContentLoaded interactive
  Time : 76
• onload complete
  Time : 81
• opera 10.62
• defer loading
  Time : 71
• jQuery ready complete
  Time : 73
• DOMContentLoaded complete
  Time : 73
• onload complete
  Time : 74
• safari 5.0.2
• defer loading
  Time : 47
• jQuery ready loaded
  Time : 49
• DOMContentLoaded loaded
  Time : 51
• onload complete
  Time : 52

페이지에 이미지(700x500)가 있을 시 이벤트 결과

 var time = (new Date()).getTime(); 

 
	if(document.addEventListener) {
		document.addEventListener( "DOMContentLoaded", function() {
			jQuery("#load").append("DOMContentLoaded "+ document.readyState +"<br/>");
			jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
		}, false);
	} else {
		document.attachEvent("onreadystatechange", function() {
			if(!document.readyState || document.readyState === "complete" || document.readyState === "loaded") {
				jQuery("#load").append("onreadystatechange "+ document.readyState +"<br/>");
				jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
			}
		});
	}
			
	window.onload = function() {
		jQuery("#load").append("onload "+ document.readyState +"<br/>");
		jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
	}
			
	jQuery(window).ready(function() {
		jQuery("#load").append("jQuery ready "+ document.readyState +"<br/>");
		jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
	});

	jQuery("#load").append("defer "+ document.readyState +"<br/>");
	jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");

• IE 6,7,8
• defer interactive
  Time : 40 Image Widht : 28
• jQuery ready interactive
  Time : 51 Image Widht : 28
• onreadystatechange complete
  Time : 2665 Image Widht : 700
• onload complete
  Time : 2676 Image Widht : 700
• chrome 6.0.472.63
• defer loading
  Time : 67 Image Widht : 0
• jQuery ready loaded
  Time : 70 Image Widht : 0
• DOMContentLoaded loaded
  Time : 72 Image Widht : 0
• onload complete
  Time : 2860 Image Widht : 700
• firefox 3.6.9
• defer loading
  Time : 52 Image Widht : 24
• jQuery ready interactive
  Time : 65 Image Widht : 24
• DOMContentLoaded interactive
  Time : 68 Image Widht : 24
• onload complete
  Time : 2370 Image Widht : 700
• opera 10.62
• defer loading
  Time : 118 Image Widht : 50
• jQuery ready interactive
  Time : 144 Image Widht : 50
• DOMContentLoaded interactive
  Time : 145 Image Widht : 50
• onload complete
  Time : 2518 Image Widht : 700
• safari 5.0.2
• defer loading
  Time : 63 Image Widht : 0
• jQuery ready loaded
  Time : 69 Image Widht : 0
• DOMContentLoaded loaded
  Time : 71 Image Widht : 0
• onload complete
  Time : 2592 Image Widht : 700

defer속성에 DOMContentLoaded, onreadystatechange 이벤트 적용

 var time = (new Date()).getTime(); 

 
	if(document.addEventListener) {
		document.addEventListener( "DOMContentLoaded", function() {
			jQuery("#load").append("DOMContentLoaded "+ document.readyState +"<br/>");
			jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
		}, false);
	} else {
		document.attachEvent("onreadystatechange", function() {
			if(!document.readyState || document.readyState === "complete" || document.readyState === "loaded") {
				jQuery("#load").append("onreadystatechange "+ document.readyState +"<br/>");
				jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
			}
		});
	}
			
	window.onload = function() {
		jQuery("#load").append("onload "+ document.readyState +"<br/>");
		jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
	}
			
	jQuery(window).ready(function() {
		jQuery("#load").append("jQuery ready "+ document.readyState +"<br/>");
		jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
	});

	if(document.addEventListener) {
		document.addEventListener( "DOMContentLoaded", function() {
			jQuery("#load").append("defer "+ document.readyState +"<br/>");
			jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
		}, false);
	} else {
		document.attachEvent("onreadystatechange", function() {
			if(!document.readyState || document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
				jQuery("#load").append("defer "+ document.readyState +"<br/>");
				jQuery("#load").append("Time : "+ ((new Date()).getTime() - time) +" Image Widht : "+ jQuery("img").width() +"<br/>");
			}
		});
	}

• IE 6,7,8
• jQuery ready interactive
  Time : 42 Image Widht : 28
• defer complete
  Time : 2433 Image Widht : 700
• onreadystatechange complete
  Time : 2435 Image Widht : 700
• onload complete
  Time : 2447 Image Widht : 700
• chrome 6.0.472.63
• jQuery ready loaded
  Time : 24 Image Widht : 0
• DOMContentLoaded loaded
  Time : 27 Image Widht : 0
• defer loaded
  Time : 29 Image Widht : 0
• onload complete
  Time : 2627 Image Widht : 700
• firefox 3.6.9
• jQuery ready interactive
  Time : 74 Image Widht : 24
• DOMContentLoaded interactive
  Time : 77 Image Widht : 24
• defer interactive
  Time : 80 Image Widht : 24
• onload complete
  Time : 2544 Image Widht : 700
• opera 10.62
• jQuery ready interactive
  Time : 135 Image Widht : 50
• DOMContentLoaded interactive
  Time : 136 Image Widht : 50
• defer interactive
  Time : 138 Image Widht : 50
• onload complete
  Time : 2707 Image Widht : 700
• safari 5.0.2
• jQuery ready loaded
  Time : 60 Image Widht : 0
• DOMContentLoaded loaded
  Time : 65 Image Widht : 0
• defer loaded
  Time : 67 Image Widht : 0
• onload complete
  Time : 2660 Image Widht : 700