DOMContentLoaded와 load의 차이

DOMContentLoaded

DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을때 발생한다.

스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않는다.

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOMContentLoaded');
});

 

load

load 이벤트는 리소스와 그것에 의존하는 리소스들(이미지, 외부 스크립트 등)의 로딩이 완료 되면 실행된다.

window.addEventListener("load", function(event) {
    console.log("load!");
  });

 

 

즉 DOMContentLoaded는 HTML, DOM트리만 생성되면 실행된다

반면 load는 이미지등의 자원 전부가 불러와진 후에 실행된다.

 

 

 

 

참고 : https://developer.mozilla.org/ko/