[JavaScript] 브라우저 로드 트리거 : DOMContentLoaded vs load

DOMContentLoaded, load

호출 시점

• DOMContentLoaded
  • HTML이 모두 로드되고 DOM 트리가 완성된 후,
  • 외부 리소스 (img src 등)가 아직 로드되지 않았을 때 실행한다.
  • DOM이 준비 상태이기 때문에 DOM 노드를 제어할 수 있다.
  • jQuery에서의 ready와 유사하다.
  • IE8 이하에서는 지원하지 않았기 때문에 잘 사용되지 않았다.
• load
  • 브라우저에 모든 리소스(img, style, script 등)이 로드되었을 때 실행한다.
  • DOMContentLoaded보다 로드되는 시점이 늦다.
  • 모든 리소스가 로드된 상태이기 때문에 리소스들의 속성(이미지 크기 등)을 얻을 수 있다.

 

주요 차이

• DOMContentLoaded
  
  • jQuery에서의 ready와 유사하다.
  • DOM이 준비 상태이기 때문에 DOM 노드를 제어할 수 있다.
  • 모든 리소스가 로드되지는 않았기 때문에 정상적인 동작이 이루어지지 않을 수 있다.
  • IE8 이하에서는 지원하지 않았기 때문에 잘 사용되지 않았다.
• load
  • 모든 리소스가 로드된 상태이기 때문에 리소스들의 속성(이미지 크기 등)을 얻을 수 있다.

 

---

참고

본 포스트는 아래 포스트들을 참고하였습니다.

https://mygumi.tistory.com/281

DOMContentLoaded, load, unload :: 마이구미

 

https://javascript.info/onload-ondomcontentloaded

Page: DOMContentLoaded, load, beforeunload, unload