$(document).ready()에 관하여

오늘은 jQuery를 제공하는 $(document).ready() 메서드와 비슷한 메서드들에 대해 알아보겠습니다.

✅ $(document).ready() 동작시점

$(document).ready()는 DOM 생성이 완료되는 시점에서 동작하게 됩니다.
즉 HTML 문서의 DOM 구조가 파싱이 된 시점부터 $(document).ready()은 실행이 가능해집니다.

$(document).ready(function(){
 	console.log('DOM Ready!');	// DOM 파싱시 실행됨 
})

✅ window.onload 와 DOMContentLoaded

js에서도 문서의 시점에 따라 실행되는 메서드를 제공합니다.

먼저 window.onload의 경우 DOM 파싱뿐만 아니라 이미지, 영상, css 등 모든 리소스가 로드된 후에 실행이 가능하다는 점에서 차이가 있습니다.

그리고 DOMContentLoaded의 경우에는 $(document).ready()와 동일한 시점에서 등록된 이벤트 핸들러를 실행합니다.

document.addEventListener("DOMContentLoaded", function () {
  console.log("DOM Ready!");	// DOM 파싱시 실행됨
});

window.onload = function(){
 	console.log('Every Rscs Ready!') // 모든 리소스 로드 후 실행됨
}

✅ 결론

$(document).ready()는 jQuery를 사용할 때 DOM이 준비되었을 때 실행되는 안전한 진입점입니다. 복잡한 타이밍 문제 없이 스크립트를 실행할 수 있게 해주며, 이미지나 외부 리소스가 모두 로드되기를 기다릴 필요가 없습니다.

만약 모든 리소스를 기다려야 하는 경우라면 window.onload를 사용해야합니다.