[js] document.ready() 와 window.load() 차이

1. $(document).ready()

- 외부 리소스 (이미지 css)와 상관 없이 브라우저가 DOM (documnet object model) 트리를 생성한 직후 실행

- window.load() 보다 빠르게 실행되고 중복하여 실행시 선언한 순서대로 실행

 

2. $(window).load()

- html의 로딩이 끝난 후에 시작

- 화면에 필요한 리소스 (css 이미지 js...)들이 웹 브라우저 메모리에 모두 올려진 다음에 실행

- 화면이 모두 그려진 후 로드되는 이벤트라 애니메이션에 적합함

- 단점 : 이미지가 모두 로드된 이후라 그만큼의 시간적 딜레이가 발생

- 외부 링크나 파일 인클루드시 그 안에 해당 이벤트가 있으면 둘 중 하나만 적용됨

- body onload 이벤트를 쓰면 모든 window.load() 가 실행되지 않는 현상이 발생

 

 

출처 : https://diaryofgreen.tistory.com/96