$(document).ready() 와 window.onload 의 차이점

두 구문을 사용하는 이유는 다음과 같다.

 

자바스크립트는 인터프리터 언어이므로 DOM이 그려지기 전에

자바스크립트로 특정 HTML태그(DOM)를 참조할 경우 스크립트 오류가 뜰 수 있다.

 

이를 해결 하기 위해 두 개의 구문이 등장하게 되었다.

 

둘의 차이점을 알아보자.

 

(참고로 window.onload 는 페이지당 한번만 사용 가능하기 때문에,

window.addEventListener를 사용하면 이러한 문제점을 해결할 수 있다.)

 

$(document).ready()

1. 호출 시점

- DOM 트리가 로드될 때 호출

2. 특징

- DOM만 로드되면 바로 실행(이미지 및 외부 리소스와 무관)

- 중복 사용해도 순서대로 모두 실행

 

window.onload

1. 호출 시점

- 페이지의 모든 요소들이 로드된 이후에 호출

2. 특징

- 페이지 로드시 자동으로 실행되는 전역 콜백 함수

- 페이지의 모든 요소들이 로드되어야 호출

- 한 페이지당 하나의 함수만 사용 가능 (가장 나중에 호출된 함수만 적용)

  ex) body 태그에 onload 구문이 있을 경우, 먼저 실행되며 window.onload는 실행되지 않음

 

전체 순서

DOM 트리 생성 -> $(document).ready() 실행 -> 이미지를 포함한 모든 요소 로드 -> window.onload 실행