JavaScript로 웹 페이지를 개발할 때 document.onload와 window.onload는 언제 실행되느냐에 따라 중요한 차이가 있습니다. 두 이벤트의 동작 시점과 특징을 자세히 살펴보겠습니다.
document.onload란?
document.onload는 이미지나 스크립트 등 외부 리소스가 로드되기 이전에 발생하는 이벤트입니다. 즉, HTML 문서 구조 자체가 준비되면 곧바로 실행되며, window.onload보다 항상 먼저 호출됩니다.
window.onload란?
window.onload는 페이지의 모든 요소가 완전히 로드된 후에 발생하는 이벤트입니다. 여기에는 HTML 문서뿐만 아니라 이미지, 스크립트 파일, CSS 스타일시트 등 페이지에 포함된 모든 외부 리소스의 로딩이 끝난 시점이 포함됩니다.
따라서 이미지 크기나 위치처럼 실제 로드된 리소스 정보가 필요한 초기화 작업은 window.onload에서 처리하는 것이 안전합니다.
예제 코드
아래 예제를 통해 window.onload의 동작 방식을 이해해 보겠습니다. 페이지가 완전히 로드된 후 init() 함수가 호출되어 이미지 객체를 초기화하고, 버튼을 클릭하면 이미지가 오른쪽으로 이동합니다.
<html>
<head>
<title>JavaScript Animation</title>
<script>
<!--
var imgObj = null;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position = 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>아래 버튼을 클릭하면 이미지가 오른쪽으로 이동합니다</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>핵심 정리
- document.onload: 문서 구조가 준비되면 즉시 실행되며, 이미지 등 외부 리소스 로딩 전에 발생합니다.
- window.onload: 이미지, 스크립트, CSS 등 모든 리소스 로딩이 완료된 후 마지막에 실행됩니다.
참고로 최신 브라우저에서는 DOM 트리 구성만 완료되면 바로 실행되는 DOMContentLoaded 이벤트를 사용하는 것이 더 효율적인 경우도 많으니, 용도에 맞게 적절한 이벤트를 선택하는 것이 좋습니다.