$(document).ready()란 무엇인가?
jQuery에서 페이지에 이벤트를 정상적으로 동작시키려면 해당 코드를 $(document).ready() 함수 안에 작성해야 합니다. 이 함수 내부의 코드는 DOM(문서 객체 모델)이 완전히 로드된 직후, 즉 이미지나 스타일시트 등 페이지의 나머지 콘텐츠가 로드되기 전에 실행됩니다.
덕분에 스크립트가 DOM 요소보다 먼저 실행되어 요소를 찾지 못하는 오류를 방지할 수 있으며, 이는 jQuery에서 가장 널리 사용되는 초기화 패턴 중 하나입니다.
$(document).ready(function() {
alert("문서가 성공적으로 로드되었습니다!");
});참고로 jQuery 3.0 이상에서는 더 간결한 축약형도 사용할 수 있습니다.
$(function() {
// DOM 준비 완료 후 실행할 코드
});순수 JavaScript로 동일한 기능 구현하기
jQuery 없이 순수 JavaScript만으로 $(document).ready와 같은 결과를 얻으려면 document.readyState 속성을 활용할 수 있습니다. 아래 예제는 setInterval을 사용해 문서의 로드 상태를 주기적으로 확인하고, 로드가 완료되면 지정한 코드를 실행합니다.
<html>
<body>
<script>
var loader = setInterval(function () {
if(document.readyState !== "complete") return;
clearInterval(loader);
alert("문서가 성공적으로 로드되었습니다!");
// document.write("문서가 성공적으로 로드되었습니다!");
}, 300);
</script>
</body>
</html>더 간단한 대안: DOMContentLoaded 이벤트
현대 브라우저에서는 위와 같은 폴링 방식 대신 표준 이벤트인 DOMContentLoaded를 사용하는 것이 더 효율적입니다.
document.addEventListener("DOMContentLoaded", function() {
alert("문서가 성공적으로 로드되었습니다!");
});DOMContentLoaded 이벤트는 HTML 문서의 파싱이 끝나는 시점에 발생하므로, 별도의 타이머 없이 깔끔하게 초기화 코드를 실행할 수 있습니다. 다만 이미지 등 모든 리소스의 로드까지 기다려야 한다면 window의 load 이벤트를 사용하는 것이 적합합니다.