728x90
반응형
브라우저가 HTML 파일을 읽어오는 순서
사용자에 의해 웹브라우저 시작 👉 브라우저의 웹문서 읽기 👉 DOM 생성 👉 $(document).ready 메소드 실행 👉 각 요소들이 로드되기 시작 👉 모든 요소의 로드가 완료되면 $(window).load 메소드 실행 됨
Ready
$(document).ready
브라우저에서 DOM이 완성된 시점
DOM트리 생성 직후이므로 window.onload보다 빠름
(HTML의 소스코드만의 로딩이 끝나서 어떻게 표현할 것인지나 내부속성이 완성)
$(document).ready(function(){
// 태그 등의 셋팅이 완료되었을 시점에 이벤트 발생
});
DOMContentLoad
document.ready와 비슷함
window.addEventListener('DOMContentLoaded', function() {
// 할 것
});
load
$(window).load & window.onload
외부호출(src) 등의 로딩이 완료된 시점 (외부호출까지 끝난 시점)
동일한 페이지 내에서 onload 함수는 하나만 존재해야 하며, 또한 <body onload=""> 와 같은 설정이 되어 있는 경우에는 attribute의 onload=""만 작동할뿐 window.onload 는 동작하지 않음
$(window).load(function(){
// 실행할 내용
});window.onload = function(){
// 할 것
}
반응형
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [JavaScript] if문 없애기 (0) | 2023.01.03 |
|---|---|
| [JavaScript] JavaScript 배열의 요소를 삭제 (0) | 2022.12.13 |
| [JavaScript] 데이터 타입 확인 (0) | 2022.11.30 |
| [JavaScript] 뒤로가기 시 페이지 정보 및 스크롤 위치 불러오기 (0) | 2022.11.28 |
| [JavaScript] localStorage와 sessionStorage 차이점 (0) | 2022.11.23 |