[JavaScript] jQuery의 $(document).ready()를 순수 자바스크립트로만으로 대체하는 코드

모바일에서 웹뷰를 통해 기능 구현을 하려다보니 jQuery는 당연히 무겁고, jQLite 조차도 부담스러울 때가 있다.

이런 경우 꼭 필요한 기능들만 자바스크립트로 직접 구현할 필요가 있는데, DOM 로드 완료 시점을 알기 위해 jQuery에선 너무나 간단하게 사용했던 ready() 함수도 자바스크립트만으로 구현할 때는 꽤 복잡해진다.

모든 케이스에서 완벽하게 돌아가는지 확인해보진 못했지만, 일단 웹킷 기반에서는 정상적으로 잘 동작하는 것을 확인했다.

// Mozilla, Opera, Webkit 
if (document.addEventListener) {
	document.addEventListener("DOMContentLoaded", function () {
		document.removeEventListener("DOMContentLoaded", arguments.callee, false);
		domReady();
	}, false);


} 

// Internet Explorer
else if (document.attachEvent) {
	document.attachEvent("onreadystatechange", function () {
		if (document.readyState === "complete") {
			document.detachEvent("onreadystatechange", arguments.callee);
			domReady();
		}
	});
}

//DOM이 모두 로드 되었을 때
function domReady () {
	//처리할 내용
}

스택오버플로우에도 다양한 의견들이 많이 있는데, 위의 코드가 비교적 명료하게 제시된 형태라고 생각된다.
http://stackoverflow.com/questions/1795089/need-help-with-jquery-to-javascript/1795167#1795167

실제 안드로이드 WebView에서 테스트해본 결과 정상적으로 동작하는 것으로 보인다.