>웹 프론트엔드 >JS 튜토리얼 >jQuery를 사용하지 않고 $(document).ready() 기능을 어떻게 얻을 수 있나요?

jQuery를 사용하지 않고 $(document).ready() 기능을 어떻게 얻을 수 있나요?

Susan Sarandon
Susan Sarandon원래의
2024-11-06 07:06:02306검색

How Can I Achieve the Functionality of $(document).ready() Without Using jQuery?

jQuery가 없는 $(document).ready()와 동일

jQuery의 $(document).ready() 함수는 콜백을 실행하기 전에 DOM이 로드되기를 기다리는 이벤트 핸들러입니다. jQuery를 사용하지 않는 경우 다음 코드 조각을 사용하여 동일한 효과를 얻을 수 있습니다.

document.addEventListener("DOMContentLoaded", function() {
  // code...
});

이 메서드는 DOM 트리가 실행될 때 실행되는 "DOMContentLoaded" 이벤트에 리스너를 연결합니다. 로드됨(이미지와 같은 외부 자산 제외).

window.onload와의 차이점

window.onload가 $(document)와 정확히 동일하게 동작하지 않는다는 점에 유의하는 것이 중요합니다. .준비가 된(). window.onload가 DOM이 로드되고 모든 요소가 로드될 때까지 기다리는 동안 $(document).ready()는 DOM이 로드될 때까지만 기다립니다. 이는 스크립트가 존재하는 DOM 요소에 의존하는 경우, 특히 외부 리소스를 처리하는 경우 중요할 수 있습니다.

IE8 및 이전 버전

보다 오래된 브라우저의 경우 IE9에서는 다음 코드 조각을 사용할 수 있습니다.

document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Initialize your application or run some code.
    }
}

이 코드는 문서의 "대화형" 상태를 확인합니다. 이는 DOM 트리가 로드되었지만 외부 리소스가 여전히 로드 중일 수 있음을 나타냅니다.

위 내용은 jQuery를 사용하지 않고 $(document).ready() 기능을 어떻게 얻을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.