December 20, 2021

HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여합니다.

• DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않습니다.
• load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다.
• beforeunload/unload – 사용자가 페이지를 떠날 때 발생합니다.

세 이벤트는 다음과 같은 상황에서 활용할 수 있습니다.

• DOMContentLoaded – DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때
• load – 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후이기 때문에 스타일이 적용된 상태이므로 화면에 뿌려지는 요소의 실제 크기를 확인할 수 있음
• beforeunload – 사용자가 사이트를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜줄 때
• unload – 사용자가 진짜 떠나기 전에 사용자 분석 정보를 담은 통계자료를 전송하고자 할 때

DOMContentLoaded

DOMContentLoaded 이벤트는 document 객체에서 발생합니다.

따라서 이 이벤트를 다루려면 addEventListener를 사용해야 합니다.

document.addEventListener("DOMContentLoaded", ready);
// "document.onDOMContentLoaded = ..."는 동작하지 않습니다.

예시:

<script>
  function ready() {
    alert('DOM이 준비되었습니다!');

    // 이미지가 로드되지 않은 상태이기 때문에 사이즈는 0x0입니다.
    alert(`이미지 사이즈: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  *document.addEventListener("DOMContentLoaded", ready);*</script><img id="img" src="<https://en.js.cx/clipart/train.gif?speed=1&cache=0>">

위 예시에서 DOMContentLoaded 핸들러는 문서가 로드되었을 때 실행됩니다. 따라서 핸들러 아래쪽에 위치한 <img>뿐만 아니라 모든 요소에 접근할 수 있습니다.

그렇지만 이미지가 로드되는 것은 기다리지 않기 때문에 alert 창엔 이미지 사이즈가 0이라고 뜹니다.