Document Load 이벤트와 Ready 이벤트의 차이점

먼저 window와 document 객체의 차이점 부터 알아보겠다.

- window는 document의 부모객체로서 브라우저 자체를 의미할 수 있으며 접근할 수 있는 자식객체로는 document, self, nvigator, screen, forms, history, location 등이 있다.

- document 객체는 트리형태의 HTML 을 접근할 수있는 객체다.

$(window).load(function(){

  // code

}); 

 ⇒ 모든 include 되는 프레임들과 object들, 이미지까지 로드된 이후에 실행된다.

 window를 로드하고 난 후 이후에 실행되는 코드들은 모든 객체나 프레임들, 이미지까지 로드한 이후에 실행되므로 document에서 제한된 작업을 진행할 수 있다.

단, 페이지의 로드타임만큼 사용자는 모니터앞에서 기다려야한다.

 ⇒ 문제점

- This only executes when the page has completely loaded, including all images

- It over-writes existing load or click handlers

- It leaks memory in IE 6

- Solving these problems requires cross-browser workarounds.

   That's where libraries come in

$(document).ready(function(){

  // code

});

 ⇒ 브라우저에서 DOM 트리를 생성하고난 후에 실행되게 되는 코드다.(DOM is ready)

 즉, Dom에 대한 접근만이 자유로움.

 아직 브라우저에서 다른 객체들이나 이미지들을 로드하지 않은 상황이므로 어떤 페이지를 사용자가

 접근할 때 이미지에 대한 가공을 하려 한다면 실패하게 된다.

 종합하자면, 

외부자원 (src=  <- 이건 웹서버에 요청(http request) 을 날리겠다는 것으로 외부자원이다) 이나 window 객체가 모두 로드되었을 때에 그 자원들을 가공할 필요가 있다면 $(window).load() 를 씀

그것이 아닌 브라우저에서 보이게 될 html 코드들에 대해서만 가공할 필요가 있다면 $(document).ready()를 사용하면 좋은 것 같다.