웹 페이지가 로드될 때 특정 JavaScript 함수를 자동으로 실행해야 하는 경우가 자주 있습니다. 예를 들어 초기 데이터 설정, UI 요소 초기화, 환영 메시지 표시 등이 이에 해당합니다.
window.onload 사용하기
페이지 로드 시 함수를 호출하는 가장 기본적인 방법은 window.onload 이벤트 핸들러를 사용하는 것입니다. window.onload는 HTML 문서뿐만 아니라 이미지, 스타일시트 등 모든 리소스의 로딩이 완료된 후에 실행됩니다.
기본 문법
window.onload = 함수이름;
예제 코드
아래 코드를 실행하면 페이지가 완전히 로드된 후 alertFunction이 자동으로 호출되어 알림 창이 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<script>
function alertFunction() {
alert('ok');
}
window.onload = alertFunction;
</script>
</body>
</html>주의 사항
함수를 할당할 때 alertFunction()처럼 괄호를 붙이면 페이지 로드와 관계없이 즉시 실행되므로, 반드시 함수 이름만 참조해야 합니다.
DOMContentLoaded와의 차이점
모든 리소스(이미지 등)의 로딩을 기다리지 않고 HTML 구조만 준비되면 바로 실행하고 싶다면 DOMContentLoaded 이벤트를 사용하는 것이 더 효율적입니다.
document.addEventListener('DOMContentLoaded', function() {
// HTML 파싱이 완료된 직후 실행
});정리
- window.onload: 이미지 등 모든 리소스 로딩이 끝난 후 실행
- DOMContentLoaded: HTML 파싱이 끝나면 즉시 실행 (더 빠름)
- 함수 할당 시 괄호를 붙이지 않도록 주의