$(document).ready와 동일한 기능을 하는 jQuery 없이 작동하는 코드.

저는 $(document).ready를 사용하는 스크립트를 가지고 있지만, jQuery에서 다른 것은 사용하지 않습니다. jQuery 종속성을 제거하여 가벼워지도록 하려고 합니다.

jQuery를 사용하지 않고 자체 $(document).ready 기능을 어떻게 구현할 수 있을까요? window.onload을 사용한다면 이미지, 프레임 등이 모두 로드된 후에 발생하기 때문에 같지 않을 것입니다.

답변 1

표준 기반으로 대체할 수 있는 DOMContentLoaded가 있으며, 이는 IE8을 제외한 브라우저의 99% 이상에 지원되는 기능입니다:

document.addEventListener(DOMContentLoaded, function(event) { 
  //작업 수행
});

jQuery의 기본 기능은 아래에 나와 있는 것처럼 window.onload보다 훨씬 복잡합니다.

function bindReady(){
만약 ( readyBound ) return;
readyBound = true;
// 현재 mozilla, opera 그리고 webkit nightlies 이 이벤트를 지원합니다.
만약 ( document.addEventListener ) {
    // 편리한 이벤트 콜백을 사용합니다.
    document.addEventListener( DOMContentLoaded, function(){
        document.removeEventListener( DOMContentLoaded, arguments.callee, false );
        jQuery.ready();
    }, false );
// 만약 IE 이벤트 모델이 사용되었다면
} else if ( document.attachEvent ) {
    // onload 이전에 발동되도록 보장합니다.
    // iframe 에 대해서 늦을 수도 있지만 안전합니다.
    document.attachEvent(onreadystatechange, function(){
        만약 ( document.readyState === complete ) {
            document.detachEvent( onreadystatechange, arguments.callee );
            jQuery.ready();
        }
    });
    // 만약 IE 이고 iframe 가 아닌 경우
    // 문서가 준비되었는지 계속해서 확인합니다.
    if ( document.documentElement.doScroll && window == window.top ) (function(){
        만약 ( jQuery.isReady ) return;
        시도 {
            // IE 인 경우 Diego Perini 의 속임수를 사용합니다.
            // http://javascript.nwbox.com/IEContentLoaded/
            document.documentElement.doScroll(left);
        } catch( error ) {
            setTimeout( arguments.callee, 0 );
            return;
        }
        // 그리고 기다리는 함수들을 실행합니다.
        jQuery.ready();
    })();
}
// 항상 작동하는 window.onload 에 대한 대체책 입니다.
jQuery.event.add( window, load, jQuery.ready );
}

답변 2

주요 웹 개발 언어인 JavaScript를 사용하여 동적 웹 페이지를 구현할 때, 웹 페이지가 완전히 로드되었을 때 특정 코드 블록을 실행하는 것은 매우 중요합니다. jQuery를 사용하는 경우, $(document).ready() 함수를 사용하여 이를 달성할 수 있습니다. 그러나 jQuery를 사용하지 않고 순수 JavaScript로 동일한 기능을 구현해야 할 때는 어떻게 해야 할까요?
많은 웹 개발자들이 알려주듯이, 웹 페이지가 로드되었을 때 특정 코드를 실행하기 위해 순수 JavaScript를 사용하려면 다음과 같이 작성하면 됩니다.
```javascript
document.addEventListener(DOMContentLoaded, function() {
// 실행하고자 하는 코드 작성
});
```
위의 예제에서 `document.addEventListener()` 함수는 DOMContentLoaded 이벤트를 수신하고, 해당 이벤트가 발생할 때마다 실행되는 콜백 함수를 정의합니다. DOMContentLoaded 이벤트는 웹 페이지의 초기 HTML 문서를 파싱(DOM 구조 생성)할 때 발생하는 이벤트이며, 이 시점에서는 이미 HTML 문서의 모든 요소에 접근할 수 있습니다. 이것은 $(document).ready() 함수와 동등한 기능을 제공합니다.
무엇보다도, 순수 JavaScript를 사용하여 동일한 기능을 구현하면 웹 페이지의 성능 및 검색 엔진 최적화에 큰 도움이 될 수 있습니다. 외부 라이브러리에 의존하지 않고 웹 페이지를 로드할 때 필요한 최소한의 자원만을 사용하기 때문입니다. 이는 검색 엔진이 웹 페이지를 색인화하고 검색 결과에 표시하는 데 중요한 역할을 합니다.
이와 함께, HTML 문서의 현재 로드 상태를 감지하고 코드를 실행하는 기능을 순수 JavaScript로 구현하면 검색 엔진이 웹 페이지의 내용을 쉽게 이해할 수 있습니다. 이는 페이지 랭킹 및 검색 결과에서의 노출에 긍정적인 영향을 미칠 수 있습니다. jQuery를 사용하면 같은 결과를 얻을 수 있지만, 검색 엔진 크롤러가 JavaScript 파일을 해석하는 데 더 많은 시간과 자원을 소비할 수 있으므로, 순수 JavaScript를 사용하는 것이 더 효율적입니다.
결론적으로, jQuery 없이 순수 JavaScript를 사용하여 웹 페이지가 완전히 로드되었을 때 특정 코드를 실행하는 것은 가능합니다. 이 방법은 검색 엔진 최적화를 향상시키고 웹 페이지의 성능을 개선하는 데 도움이 됩니다. 따라서 웹 개발자들은 웹 페이지 개발시 jQuery 없이도 이러한 기능을 구현할 수 있도록 순수 JavaScript를 활용하는 것을 권장합니다.