프레임워크에 의존하지 않고 DOM 준비 상태를 어떻게 확인할 수 있습니까?

Document.isReady: DOM 준비 감지를 위한 기본 솔루션

window.onload 이벤트 관리를 위해 Prototype 및 jQuery와 같은 프레임워크에 의존하지 않을 수 있습니다. 항상 바람직합니다. 이 기사에서는 특히 document.isReady를 사용하여 DOM 준비 상태를 확인하는 대체 방법을 살펴봅니다.

Document.isReady 쿼리

안정적인 이벤트 API를 사용하는 최신 브라우저의 경우 DOMContentLoaded 이벤트는 DOM 준비 이벤트를 처리하기 위한 강력한 방법을 제공합니다. 다음과 같은 구현은 간단하고 효율적인 솔루션을 제공합니다.

<code class="javascript">function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
    fireOnReady();
} else {
    document.addEventListener("DOMContentLoaded", fireOnReady);
}</code>

jQuery의 $.isReady 속성

jQuery는 문서화되지 않은 속성인 $.isReady를 제공합니다. 내부적으로 DOM 준비 상태입니다. 이 속성을 활용하면 간결한 검사가 가능합니다.

<code class="javascript">if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}</code>

이 속성은 문서화되지 않은 상태로 남아 있으며 향후 jQuery 버전에서의 가용성이 보장되지 않는다는 점에 유의하는 것이 중요합니다. 주의해서 사용하고 업그레이드 시 잠재적인 변경에 대비하세요.

사용자 정의 DOM 지원 스니펫

더 넓은 브라우저 호환성을 위해 사용자 정의 DOM 지원 스니펫을 사용할 수 있습니다. Dustin Diaz의 접근 방식에서 영감을 받아 정규식을 사용하여 document.readyState를 확인합니다.

<code class="javascript">if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}</code>

이 방법은 "in" 하위 문자열이 "loading" 및 "interactive" Ready에 존재한다는 사실에 의존합니다. 상태이지만 "완료" 상태는 아닙니다.

위 내용은 프레임워크에 의존하지 않고 DOM 준비 상태를 어떻게 확인할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!