[JQUERY] '.ready $ (문서) ()'의 비 jQuery를 상응하는 무엇입니까?

'.ready $ (문서) ()'의 비 jQuery를 상응하는 무엇입니까?

해결법

1. ---

   1..ready $ (문서) ()의 좋은 점은 창로드하기 전에 화재 것입니다. 모든 외부 자산 및 이미지를 포함하여,로드 될 때까지로드 기능을 기다립니다. $ (문서) .ready 그러나, DOM 트리 화재 완료하고 조작 할 수 있습니다 때. 당신이 jQuery를하지 않고 준비 DOM을 acheive하려는 경우, 당신은이 라이브러리에 확인할 수 있습니다. 누군가가 jQuery를에서 불과 준비 부분을 추출 하였다. 그것의 좋은 작은 당신은 그것을 유용하게 찾을 수 있습니다 :

   .ready $ (문서) ()의 좋은 점은 창로드하기 전에 화재 것입니다. 모든 외부 자산 및 이미지를 포함하여,로드 될 때까지로드 기능을 기다립니다. $ (문서) .ready 그러나, DOM 트리 화재 완료하고 조작 할 수 있습니다 때. 당신이 jQuery를하지 않고 준비 DOM을 acheive하려는 경우, 당신은이 라이브러리에 확인할 수 있습니다. 누군가가 jQuery를에서 불과 준비 부분을 추출 하였다. 그것의 좋은 작은 당신은 그것을 유용하게 찾을 수 있습니다 :

   Google 코드에서 domready

2. ---

   2.이는 ECMA에서 완벽하게 작동

   이는 ECMA에서 완벽하게 작동

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

   단지 DOM 트리 $ (문서) .ready 대기 창로드 외부 자산과 이미지를 포함한 모든 요소를 ​​확인하면서 .ready 때문에 창로드 JQuery와 $ (문서)에 동일하지 않습니다.

   편집 : 추가 IE8 이상 해당 월 Derk의 관찰에 감사합니다. 당신은이 링크에서 MDN에이 코드의 소스를 읽을 수 있습니다 :

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

   "대화"에서 떨어져 다른 옵션이 있습니다. 자세한 내용은 MDN 링크를 참조하십시오.

3. ---

   3.내가 함께 넣어 작은 일

   내가 함께 넣어 작은 일

   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);
   

4. ---

   4.지금은 2018하다는 여기에 빠르고 간단한 방법입니다.

   지금은 2018하다는 여기에 빠르고 간단한 방법입니다.

   이 이벤트 리스너를 추가하지만, 이미 발사하면 우리는 DOM이 준비 상태에 있거나이 완료 있다는 것을 확인할 수 있습니다. 완성 된로드 (이미지, 스타일 시트, 프레임, 등)가 이전 또는 하위 자원 후에이 발생 할 수 있습니다.

   함수 domReady (FN) { // 우리는 초기 파티에 있다면 document.addEventListener ( "DOMContentLoaded", FN); // 늦게하는 경우; 나는 시간을 의미한다. (document.readyState === "대화"|| document.readyState === "완료") {경우 FN (); } } domReady (() =>을 console.log ( "DOM 와서 그것을 얻을 준비가되어 있습니다!"));

   여기뿐만 아니라 타이프 라이터를 포함 표준 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);
     }
   }
   

   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);
     }
   });
   

5. ---

   5.즉, 여전히 IE8에서 작동하는 좋은 교체 http://youmightnotneedjquery.com/#ready하는 것입니다 따르면

   즉, 여전히 IE8에서 작동하는 좋은 교체 http://youmightnotneedjquery.com/#ready하는 것입니다 따르면

   기능 준비 (FN) { 경우 (document.readyState! = '로딩') { FN (); } 다른 경우 (document.addEventListener) { document.addEventListener ( 'DOMContentLoaded', FN); } 다른 { document.attachEvent ( '을 onreadystatechange'함수 () { 경우 (document.readyState! = '로딩') FN (); }); } } // 테스트 window.ready (함수 () { 경고 ( '그것은 작동합니다'); });

   개선 사항 : FN의 종류가 함수 인 경우 개인적으로도 확인합니다. 그리고 @elliottregan로 사용 후 이벤트 리스너를 제거 제안했다.

   나는이 대답을 찾고했지만 여기를 찾을 수 없습니다 때문에 늦게이 질문에 대답하는 이유입니다. 그리고 나는 이것이 가장 좋은 방법이라고 생각합니다.

6. ---

   6.IE8이 90 % + 브라우저에서 지원하는 표준 기반의 교체, DOMContentLoaded는 있지만 (그래서 브라우저 지원을위한 JQuery와에 의해 코드 사용 아래) :

   IE8이 90 % + 브라우저에서 지원하는 표준 기반의 교체, DOMContentLoaded는 있지만 (그래서 브라우저 지원을위한 JQuery와에 의해 코드 사용 아래) :

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

   아래에 묘사 된 것처럼 jQuery의 기본 기능은 훨씬 더, 다만 창로드보다 복잡하다.

   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 );
   }
   

7. ---

   7.평범한 자바 스크립트에서, 아니 라이브러리와? 그것은 오류입니다. $ 단순히 식별자이며, 당신이 그것을 정의하지 않는 한 정의되지 않습니다.

   평범한 자바 스크립트에서, 아니 라이브러리와? 그것은 오류입니다. $ 단순히 식별자이며, 당신이 그것을 정의하지 않는 한 정의되지 않습니다.

   이 (다른 라이브러리와 충돌없이 사용할 수 있습니다 또한 jQuery를라고도 함) 자신의 "모든 개체"입니다으로 jQuery를가 $를 정의합니다. 당신이 jQuery를 (또는 그것을 정의하는 다른 라이브러리)을 사용하지 않는 경우, 다음 $ 정의되지 않습니다.

   아니면 해당하는 일반 자바 스크립트로 무엇을 물어? 이 경우, 당신은 아마 정확히 일치하지 않는, 그러나 가까운 바닐라 자바 ​​스크립트 같은 효과를 얻을 수있는 가장 빠르고 쉬운 방법입니다 창로드를합니다.

8. ---

   8.최근 브라우저에서 가장 쉬운 방법은 적절한 GlobalEventHandlers를 사용하는 것, onDOMContentLoaded, 온로드, onloadeddata (...)

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

   onDOMContentLoaded = (함수 () {을 console.log ( "DOM 준비!")}) () 온로드 = (함수 () {을 console.log는 ( "페이지가 완전히로드!")}) () onloadeddata = (함수 () {CONSOLE.LOG는 ( "데이터로드!")}) ()

   초기 HTML 문서가 완전히로드 및 구문 분석되었을 때 DOMContentLoaded 이벤트가 마무리 로딩에 스타일 시트, 이미지 및 서브 프레임을 기다리지 않고, 발생합니다. 아주 다른 이벤트 부하가 완전히로드 된 페이지를 감지하는 경우에만 사용되어야한다. 그것은 DOMContentLoaded 훨씬 더 적절할 것 사용 부하에 매우 인기 실수, 그래서주의입니다.

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

   준비가되면 그 자체를 트리거로 사용되는 기능은,이 경우에 매우 유용한 인생입니다 :

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

   모든 스크립트의 마지막에 배치 할 분명히 더 적절하다.

   ES6, 우리는 또한 화살표 기능으로 쓸 수 있습니다 :

   온로드 = (() => {을 console.log ( "ES6 페이지가 완전히로드!")}) ()

   어떤 변수가 준비를위한 가장 DOM 요소를 사용하는 것입니다, 우리는 방아쇠를, 화살표가 붙은 인생을 기다릴 수 있습니다.

   동작은하지만, 적은 메모리에 미치는 영향과, 동일합니다.

   바닥 글 = (은 () => {을 console.log (이하 "바닥 글로드!")}) ()

   대부분의 경우, 문서 객체는 브라우저에서 적어도 때 준비 트리거됩니다. 구문은 아주 좋은,하지만 호환성에 대한 자세한 testings를 필요합니다.

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

9. ---

   9.몸에 onLoad도 대안이 될 수있다 :

   몸에 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>
   

from https://stackoverflow.com/questions/2304941/what-is-the-non-jquery-equivalent-of-document-ready by cc-by-sa and MIT license