[jQuery] Window Load 와 Document Ready 의 차이점
- 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()를 사용하면 좋은 것 같다.