javascript 문서 로드 시점

JavaScript에서 문서가 완전히 로드되었을 때 코드를 실행하는 방법에는 여러 가지가 있습니다. 주로 사용되는 방법으로는 `document.ready`, `window.onload`, 그리고 최근에는 `window.addEventListener('DOMContentLoaded', ...)`이 있습니다.

 

이 글에서는 document.ready window.ready window.onload 3가지 로드의 차이점에 대해서 말씀드리겠습니다.

 

 

1. **`document.ready` (jQuery):**
   
   jQuery 라이브러리를 사용하는 경우, 주로 `$(document).ready()`를 활용하여 문서가 준비되었을 때 코드를 실행합니다. 이벤트 핸들러는 DOM이 준비되었을 때 즉시 실행됩니다.


    $(document).ready(function() {
        // 코드 실행
    });

 

 

 

2. **`window.onload`:**

   `window.onload`은 문서의 모든 리소스 (이미지, 스타일시트 등)가 로드되고 나서 코드를 실행합니다.

 

    window.onload = function() {
        // 코드 실행
    };

 

반응형

 

3. **`window.addEventListener('DOMContentLoaded', ...)` (비동기적으로 실행):**

   `DOMContentLoaded` 이벤트는 초기 HTML 문서가 완전히 로드되고 파싱되었을 때 발생하며, 모든 이미지 및 외부 리소스가 로드될 때까지 기다리지 않습니다. 따라서 일반적으로 `window.onload`보다 빠르게 발생하며, 페이지의 초기화 시간을 단축할 수 있습니다.


    window.addEventListener('DOMContentLoaded', function() {
        // 코드 실행
    });


코드 실행 순서는 다음과 같습니다:

1. `document.ready` (jQuery 사용 시)
2. `DOMContentLoaded` 이벤트 (비동기적으로 실행)
3. `window.onload`

주의할 점은 `document.ready`는 jQuery 라이브러리에 의존하므로 jQuery를 사용하지 않는 경우에는 사용할 수 없습니다. 대신 `DOMContentLoaded` 이벤트나 `window.onload`을 활용할 수 있습니다. 최근에는 jQuery 없이도 `DOMContentLoaded` 이벤트를 더 선호하는 추세가 있습니다.