페이지의 로딩완료 후 작동하거나 보여지기를 원할 때
브라우저가 HTML 파일을 읽어오는 순서, 그리고 ready와 load 메소드의 실행 지점
사용자에 의해 웹브라우저 시작 -> 브라우저의 웹문서 읽기 -> DOM 생성 -> $(document).ready 메소드 실행 -> 각 요소들이 로드되기 시작 -> 모든 요소의 로드가 완료되면 $(window).load 메소드 실행 됩니다. (참고출처)
게시글의 댓글에 괜찮은 내용이 있어 옮겨왔습니다.
쉽게 ready(준비)가 load보다 빠르다라고 생각하면 이해가 빠를 것입니다. window 객체와 document 객체는 서로 의존적이지는 않으나 window의 크기나 URL 주소 등이 문서에 따라 새로이 정의되는 부분이 있어 document 객체에 따라 window 객체도 새로 정의된다는 생각이 있는 것입니다.
window는 document보다 상위 개념이라고 하는 것은 브라우저 객체모델에서 정의한 것일 뿐, 그 상위 개념이 순서에 따라 먼저 존재한다거나 나중에 존재해야 한다는 것은 각 웹브라우저의 기술적 방법의 정의일 뿐입니다. 기술적인 방법에는 차이가 있을지라도 더욱 빠르고 효과적으로 다가서려보니 비슷비슷한 구현(일부 컨텐츠가 파싱되고 화면에 나타나는 동안 계속해서 남은 컨텐츠를 네트워크로부터 받아온다거나...)이 나올 수밖에 없고, 다년간에 축적된 경험을 통해서 형성되고 브라우저끼리 서로 모방하면서 지금과 같이 성립이 된(표준 명세에도 없는..) 것이기에 그러한 순서를 제공한다고 보시면 이해가 되시라 봅니다. (실제 물리적인 구현과 이론적인 순서는 다를 수 있다는 말)
- 추가 : 브라우저에서 alert(window == document.body) 를 확인해 보세요. 웹브라우저에 따라 기술적으로 구현이 다를 수 있습니다. window객체도 모두 초기화가 될 것이라는 생각도 잘못된 생각입니다. 실제 우리가 확인할 수 없는 부분도 있고, 실제 우리에게 그렇게 작동 되도록 보이는 것도 일부 있습니다.
alert(window == document.body); //익스플로러의 경우 falseReady
$(document).ready
= 브라우저에서 DOM이 완성된 시점. DOM트리 생성 직후이므로 window.onload보다 빠름
(HTML의 소스코드만의 로딩이 끝나서 어떻게 표현할 것인지나 내부속성이 완성)
$(document).ready(function(){
// 태그 등의 셋팅이 완료되었을 시점에 이벤트 발생
});
DOMContentLoad
document.ready와 크게 다를 바 없습니다.
ie8이하에서는 지원하지 않습니다. (>대체 방안)
window.addEventListener('DOMContentLoaded', function()
{
// 할 것
});
load
$(window).load , window.onload
= 외부호출(src) 등의 로딩이 완료된 시점 (외부호출까지 끝난 시점)
동일한 페이지 내에서 onload 함수는 하나만 존재해야 하며, 또한 <body onload=""> 와 같은 설정이 되어 있는 경우에는 attribute의 onload=""만 작동할뿐 window.onload 는 동작하지 않습니다.
$(window).load(function(){
// 실행할 내용
});window.onload = function(){
// 할 것
}
> document ready, window load, body onload 순서 테스트
'Javascript' 카테고리의 다른 글
| [JS] Window.localStorage 로 값 조회, 추가(저장), 수정, 삭제 (3) | 2020.04.16 |
|---|---|
| 자바스크립트 브라우저 버전 감지(navigator.userAgent) (0) | 2020.04.16 |
| 모던 자바스크립트 입문 : 4. 객체와 배열, 함수의 기초 (0) | 2020.04.06 |
| 모던 자바스크립트 입문 : 3. 변수와 값 (0) | 2020.04.04 |
| 모던 자바스크립트 입문 : 2. 프로그램의 작성법과 실행법 (0) | 2020.04.04 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
