문서 로드 이전, 이후에 따른 함수 정의 - onload, DOMContentLoaded

문서의 로드 시점, 즉 해당 페이지를 구성하는 모든 리소스가 로드된 이후/이전 상태를 인식하여 특정 함수를 호출하고 싶은 사람들을 위해 onload와 DOMContentLoaded를 제공한다.

 

onload

• onload는 css, image와 같은 페이지를 구성하는 각종 리소스가 모든 로드된 이후 실행된다.

onload 사용법

window.addEventListener('load', (event) => {

  - 내용 -
  
});

window.onload = (event) => {
  
  - 내용 -
  
};

 

DOMContentLoaded

• HTML 문서가 로드되자마자 바로 실행된다.
• css, image와 같은 서브 리소스들의 로드가 완료될 때까지 기다리지 않는다.

DOMContentLoaded 사용법

document.addEventListener('DOMContentLoaded', (event) => {

  - 내용 -
  
});

 

MDN 문서에서는 Document.readyState의 속성값을 사용한 활용법을 보여준다.

세부적인 동작을 컨트롤 할 때 유용하게 사용될 것 같다.

 

if (document.readyState === 'loading') {  // Loading hasn't finished yet
 
 				- 내용 -
 
} else {  // `DOMContentLoaded` has already fired
  
  				- 내용 - 

}

 

참고

- https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
- https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
- https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState