본문으로 바로가기

문서의 로드시점 - onload, DOMContentLoaded

category 웹코딩/Javascript 2016. 4. 4. 11:00

웹문서를 만드는 경우, 문서가 로드되었을때를 기점으로 문서를 초기화하고, 각종 설정을 부여하는 것은 빈번한 일입니다. 이 시점에 접근하기 위해 사용되는 이벤트들에 대하여 알아봅니다.

일반적으로, 스크립트를 문서의 마지막(</body>) 이전에 삽입하면 굳이 이벤트를 이용하여 프로그래밍을 처리할 필요가 없다. 다만, 문서의 <head> 영역에 스크립트가 삽입되거나 외부의 파일에 정의되어 있다면 이벤트를 연결하여 문서의 로드시점에 맞게 처리해야 한다.

onload

문서의 모든 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트이다(load 이벤트라고들 한다).

window.onload = function() {
//실행될 코드
}
  • 문서에 포함된 모든 콘텐츠가 로드된 후에 실행되기에 불필요한 로딩시간이 추가될 수 있다.
  • 동일한 문서에 오직 onload는 하나만 존재해야 한다.
    • 중복될 경우, 마지막 선언이 실행된다.
    • 외부 라이브러리에서 이미 선언된 경우 이를 찾아 하나로 합치는 과정이 필요하다.
  • 외부의 자원(iframe, image, script)을 사용하는 경우에도 해당된다.

<body> 요소에 속성(attribute)으로 지정될 수 있다.

<body onload="실행될 코드">
  • 위와 같이 사용된 경우, window.onload로 지정된 것은 무시된다.

window 객체뿐만 아니라 원하는 객체(object)가 로드되었을때 실행될 코드를 설정할 수 있다.

document.getElementById("myFrame").onload = function() {
//실행될 코드
}

이벤트를 직접 연결할 수도 있다.

window.addEventListener('load', function(){
//실행될 코드
});

jQuery load

jQuery에서는 onload와 같은 동작을 하는 load 메소드를 제공한다.

 $(window).load( function() {
//실행될 코드
})

DOMContentLoaded

HTML과 script가 로드된 시점에 발생하는 이벤트이다.

window.addEventListener('DOMContentLoaded', function(){
//실행될 코드
})
  • onload 이벤트보다 먼저 발생한다. 빠른 실행속도가 필요할때 적합하다.
  • IE8 이하에서는 지원하지 않는다.

IE8 이하에 대체방안

비슷한 기능을 하는 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 () {
	//처리할 내용
}

jQuery ready

자바스크립트의 DOM 트리가 준비되었을때의 시점을 컨트롤하는 메소드로 DOMContentLoaded의 jQuery 버전이라 생각하자.

$(document).ready(function(){
//실행될 코드
});
  • onload 이벤트보다 먼저 발생한다. 즉, 문서의 모든 자원이 다운로드되었을때 발생하는 onload와 달리 DOM 트리만 완성되면 바로 발생하므로 빠른 실행속도가 필요할때 적합하다.
  • 여러번 사용되면 선언 순서에 따라 순차적으로 실행된다.