본문 바로가기

플밍 is 뭔들/JavaScript&jQuery

[JavaScript&Query] $(document).ready 와 window.onload의 차이

$(document).ready() 와 window.onload는 모두 웹페이지가 로드되면서 발생한다.

ready()는 DOMContentLoaded 이벤트를 포함한 메서드로써 이 이벤트는 웹페이지를 읽은 후 태그와 1:1 매핑되는 DOM 객체를 생성한 후 발생한다. 이벤트가 발생한 시점에서는 이미지나 플래시 같은 무거운 콘텐츠는 아직 로드되지 않는다.

하지만 window 객체에서 발생하는 load이벤트는 이미지나 플래시 같이 무거운 콘텐츠가 모두 로드되고 난 후 발생하는 이벤트이다.

정리해보면  DOMContentLoaded 이벤트가 먼저 발생하고 이후 이미지 등의 콘텐츠가 모두 로드되고 load 이벤트가 발생한다.

이러한 특징을 잘 기억했다가 적절하게 사용하자 
(일반적으로 실무에서는 특별한 경우가 아니라면 ready() 메서드를 주로 사용한다고 한다.)