[jQuery] Window Load 와 Document 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에 대한 접근만이 자유로움.

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

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

종합하자면,

외부자원이나 window 객체가 모두 로드되었을 때에 그 자원들을 가공할 필요가 있다면 $(window).load() 를 씀

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

 

 

[출처] http://enterkey88.tistory.com/148

[출처] [jQuery] Window Load 와 Document Ready 의 차이점|작성자 주한길