document.ready와 window.load

브라우저가 페이지를 읽어오는 순서를 간략하게 나열해보자면

1. 사용자가 페이지 방문
2. 브라우저에 의한 파싱을 거쳐 DOM 생성
3. 이미지 등 부가 요소 로딩
4. 페이지 로딩 완료

정도로 볼 수 있다.

$(document).ready 메소드는 2번 타이밍에 실행되며

$(window).load 메소드는 4번 타이밍에 실행된다.

간단한 예시로 순서를 보자면 다음과 같다.

<script type="text/javascript">
    $(window).load(function() {
        alert(2); //위 순서도의 4번 타이밍에 실행
    });
    alert(0); //위 순서도의 2번 이전에 실행
    $(document).ready(function() {
        alert(1); //위 순서도의 2번 타이밍에 실행
    });
</script>