jQuery가 아닌 '$ (document) .ready ()'는 무엇입니까?

비 jQuery와 동등한 것은 무엇입니까? $(document).ready() 무엇입니까?

좋은 점은 $(document).ready()전에 발사한다는 것 window.onload입니다. 로드 기능은 외부 자산 및 이미지를 포함하여 모든 것이로드 될 때까지 기다립니다. $(document).ready그러나 DOM 트리가 완료되어 조작 할 수있을 때 발생합니다. jQuery없이 DOM을 준비하려면이 라이브러리를 체크인하십시오. 누군가가 단지 추출ready jQuery 일부만 . 멋지고 작으며 유용 할 수 있습니다.

Google 코드의 domready

이것은 ECMA에서 완벽하게 작동합니다.

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

는 window.onloadJQuery와 동일하지 않기 $(document).ready때문에 $(document).ready단지 DOM 트리에 대기하는 동안 window.onload외부 자산과 이미지를 포함한 모든 요소를 확인합니다.

편집 : Jan Derk 의 관찰 덕분에 IE8 이상을 추가했습니다 . 이 링크의 MDN에서이 코드의 소스를 읽을 수 있습니다 .

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

이외의 다른 옵션이 있습니다 "interactive". 자세한 내용 은 MDN 링크를 참조하십시오.

내가 한 작은 것

domready.js

(function(exports, d) {
  function domReady(fn, context) {

    function onReady(event) {
      d.removeEventListener("DOMContentLoaded", onReady);
      fn.call(context || exports, event);
    }

    function onReadyIe(event) {
      if (d.readyState === "complete") {
        d.detachEvent("onreadystatechange", onReadyIe);
        fn.call(context || exports, event);
      }
    }

    d.addEventListener && d.addEventListener("DOMContentLoaded", onReady) ||
    d.attachEvent      && d.attachEvent("onreadystatechange", onReadyIe);
  }

  exports.domReady = domReady;
})(window, document);

사용 방법

<script src="domready.js"></script>
<script>
  domReady(function(event) {
    alert("dom is ready!");
  });
</script>

두 번째 인수를 전달하여 콜백이 실행되는 컨텍스트를 변경할 수도 있습니다.

function init(event) {
  alert("check the console");
  this.log(event);
}

domReady(init, console);

이제 2018 년이므로 빠르고 간단한 방법이 있습니다.

이벤트 리스너가 추가되지만 이미 시작된 경우 dom이 준비 상태인지 또는 완료되었는지 확인합니다. 하위 리소스로드가 완료되기 전후에 이미지, 스타일 시트, 프레임 등이 발생할 수 있습니다.

function domReady(fn) {
  // If we're early to the party
  document.addEventListener("DOMContentLoaded", fn);
  // If late; I mean on time.
  if (document.readyState === "interactive" || document.readyState === "complete" ) {
    fn();
  }
}

domReady(() => console.log("DOM is ready, come and get it!"));

추가 자료

• https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
  • 로딩이 이미 완료되었는지 확인
• https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

최신 정보

다음은 TypeScript를 포함하여 작성한 표준 ES6 가져 오기 및 내보내기를 사용하는 빠른 유틸리티 도우미입니다. 어쩌면 나는이 라이브러리를 종속성으로 프로젝트에 설치할 수있는 빠른 라이브러리로 만들 수 있습니다.

자바 스크립트

export const domReady = (callBack) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

TypeScript

export const domReady = (callBack: () => void) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack: () => void) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

약속

export const domReady = new Promise(resolve => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', resolve);
  }
  else {
    resolve();
  }
});

export const windowReady = new Promise(resolve => {
  if (document.readyState === 'complete') {
    resolve();
  }
  else {
    window.addEventListener('load', resolve);
  }
});

http://youmightnotneedjquery.com/#ready 에 따르면 IE8에서 여전히 작동하는 멋진 대체 기능은

function ready(fn) {
  if (document.readyState != 'loading') {
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

// test
window.ready(function() {
    alert('it works');
});

개선 사항 : 개인적으로 유형이 fn함수 인지 확인 합니다. 그리고 @elliottregan 은 사용 후 이벤트 리스너를 제거하도록 제안했습니다.

이 질문에 늦게 대답 한 이유는이 답변을 검색했지만 여기서 찾을 수 없기 때문입니다. 그리고 이것이 최선의 해결책이라고 생각합니다.

표준 기반 대체, DOMContentLoaded가 90 % 이상 브라우저에서 지원되지만 IE8에서는 지원되지 않습니다 (따라서 JQuery는 브라우저 지원을 위해 아래 코드 사용) .

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

jQuery의 기본 기능 은 아래에 표시된 것처럼 window.onload보다 훨씬 복잡합니다.

function bindReady(){
    if ( readyBound ) return;
    readyBound = true;

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", function(){
            document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
            jQuery.ready();
        }, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", function(){
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", arguments.callee );
                jQuery.ready();
            }
        });

        // If IE and not an iframe
        // continually check to see if the document is ready
        if ( document.documentElement.doScroll && window == window.top ) (function(){
            if ( jQuery.isReady ) return;

            try {
                // If IE is used, use the trick by Diego Perini
                // http://javascript.nwbox.com/IEContentLoaded/
                document.documentElement.doScroll("left");
            } catch( error ) {
                setTimeout( arguments.callee, 0 );
                return;
            }

            // and execute any waiting functions
            jQuery.ready();
        })();
    }

    // A fallback to window.onload, that will always work
    jQuery.event.add( window, "load", jQuery.ready );
}

라이브러리가없는 일반 바닐라 JavaScript? 오류입니다.$는 식별자 일 뿐이며 정의하지 않으면 정의되지 않습니다.

jQuery는 $자체 "모든 객체"로 정의합니다 ( jQuery다른 라이브러리와 충돌하지 않고 사용할 수 있음). jQuery (또는이를 정의하는 다른 라이브러리)를 사용 $하지 않는 경우 정의되지 않습니다.

아니면 평범한 JavaScript에서 동등한 것이 무엇인지 묻고 있습니까? 이 경우 window.onload에는 똑같지 않지만 바닐라 JavaScript에서 동일한 효과에 가까워지는 가장 빠르고 쉬운 방법입니다.

최근 브라우저에서 가장 쉬운 방법은 적절한 GlobalEventHandlers , onDOMContentLoaded , onload , onloadeddata (...)를 사용하는 것입니다.

onDOMContentLoaded = (function(){ console.log("DOM ready!") })()

onload = (function(){ console.log("Page fully loaded!") })()

onloadeddata = (function(){ console.log("Data loaded!") })()

DOMContentLoaded 이벤트는 스타일 시트, 이미지 및 서브 프레임이로드를 완료 할 때까지 기다리지 않고 초기 HTML 문서가 완전히로드되고 구문 분석 될 때 시작됩니다. 완전히로드 된 페이지를 감지하기 위해서만 매우 다른 이벤트로드를 사용해야합니다. DOMContentLoaded가 훨씬 더 적합한 load를 사용하는 것은 매우 인기있는 실수이므로 조심해야합니다.

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

사용 된 함수는 IIFE이며이 경우 매우 유용합니다. 준비가되면 트리거됩니다.

https://ko.wikipedia.org/wiki/Immediately-invoked_function_expression

스크립트 끝에 배치하는 것이 더 적절합니다.

ES6에서는 화살표 함수로 작성할 수도 있습니다.

onload = (() => { console.log("ES6 page fully loaded!") })()

가장 좋은 방법은 DOM 요소를 사용하는 것입니다. 우리는 화살표 IIFE를 트리거하는 변수가 준비 될 때까지 기다릴 수 있습니다.

동작은 동일하지만 메모리에 미치는 영향은 줄어 듭니다.

footer = (() => { console.log("Footer loaded!") })()

<div id="footer">

대부분의 경우 문서 객체는 적어도 내 브라우저에서 준비 될 때 트리거 됩니다 . 구문은 매우 훌륭하지만 호환성에 대한 추가 테스트가 필요합니다.

document=(()=>{    /*Ready*/   })()

본문 onLoad도 대안이 될 수 있습니다.

<html>
<head><title>Body onLoad Exmaple</title>

<script type="text/javascript">
    function window_onload() {
        //do something
    }
</script>

</head>
<body onLoad="window_onload()">

</body>
</html>