jQuery 없이 $(document).ready 동등

질문자 :FlySwat

$(document).ready 를 사용하는 스크립트가 있지만 jQuery의 다른 것은 사용하지 않습니다. jQuery 종속성을 제거하여 이를 가볍게 하고 싶습니다.

jQuery를 사용하지 않고 $(document).ready 기능을 구현하려면 어떻게 해야 합니까? 모든 이미지, 프레임 등이 로드된 후에 window.onload window.onload 를 사용하는 것은 동일하지 않다는 것을 알고 있습니다.

IE8은 아니지만 99% 이상의 브라우저 에서 지원하는 표준 기반 대체 DOMContentLoaded 가 있습니다.

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

Chad Grant

편집하다:

다음은 jQuery 준비를 위한 실행 가능한 대체품입니다.

 function ready(callback){ // in case the document is already rendered if (document.readyState!='loading') callback(); // modern browsers else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback); // IE <= 8 else document.attachEvent('onreadystatechange', function(){ if (document.readyState=='complete') callback(); }); } ready(function(){ // do something });

https://plainjs.com/javascript/events/running-code-when-the-document-is-ready-15/ 에서 가져옴

https://stackoverflow.com/a/9899701/175071 에서 가져온 또 다른 좋은 domReady 기능

---

허용된 답변이 완전하지 않았기 때문에 jQuery 1.6.2 소스를 기반으로 하는 jQuery.ready() 와 같은 "준비된" 기능을 함께 연결했습니다.

 var ready = (function(){ var readyList, DOMContentLoaded, class2type = {}; class2type["[object Boolean]"] = "boolean"; class2type["[object Number]"] = "number"; class2type["[object String]"] = "string"; class2type["[object Function]"] = "function"; class2type["[object Array]"] = "array"; class2type["[object Date]"] = "date"; class2type["[object RegExp]"] = "regexp"; class2type["[object Object]"] = "object"; var ReadyObj = { // Is the DOM ready to be used? Set to true once it occurs. isReady: false, // A counter to track how many items to wait for before // the ready event fires. See #6781 readyWait: 1, // Hold (or release) the ready event holdReady: function( hold ) { if ( hold ) { ReadyObj.readyWait++; } else { ReadyObj.ready( true ); } }, // Handle when the DOM is ready ready: function( wait ) { // Either a released hold or an DOMready/load event and not yet ready if ( (wait === true && !--ReadyObj.readyWait) || (wait !== true && !ReadyObj.isReady) ) { // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). if ( !document.body ) { return setTimeout( ReadyObj.ready, 1 ); } // Remember that the DOM is ready ReadyObj.isReady = true; // If a normal DOM Ready event fired, decrement, and wait if need be if ( wait !== true && --ReadyObj.readyWait > 0 ) { return; } // If there are functions bound, to execute readyList.resolveWith( document, [ ReadyObj ] ); // Trigger any bound ready events //if ( ReadyObj.fn.trigger ) { // ReadyObj( document ).trigger( "ready" ).unbind( "ready" ); //} } }, bindReady: function() { if ( readyList ) { return; } readyList = ReadyObj._Deferred(); // Catch cases where $(document).ready() is called after the // browser event has already occurred. if ( document.readyState === "complete" ) { // Handle it asynchronously to allow scripts the opportunity to delay ready return setTimeout( ReadyObj.ready, 1 ); } // Mozilla, Opera and webkit nightlies currently support this event if ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); // A fallback to window.onload, that will always work window.addEventListener( "load", ReadyObj.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", DOMContentLoaded ); // A fallback to window.onload, that will always work window.attachEvent( "onload", ReadyObj.ready ); // If IE and not a frame // continually check to see if the document is ready var toplevel = false; try { toplevel = window.frameElement == null; } catch(e) {} if ( document.documentElement.doScroll && toplevel ) { doScrollCheck(); } } }, _Deferred: function() { var // callbacks list callbacks = [], // stored [ context , args ] fired, // to avoid firing when already doing so firing, // flag to know if the deferred has been cancelled cancelled, // the deferred itself deferred = { // done( f1, f2, ...) done: function() { if ( !cancelled ) { var args = arguments, i, length, elem, type, _fired; if ( fired ) { _fired = fired; fired = 0; } for ( i = 0, length = args.length; i < length; i++ ) { elem = args[ i ]; type = ReadyObj.type( elem ); if ( type === "array" ) { deferred.done.apply( deferred, elem ); } else if ( type === "function" ) { callbacks.push( elem ); } } if ( _fired ) { deferred.resolveWith( _fired[ 0 ], _fired[ 1 ] ); } } return this; }, // resolve with given context and args resolveWith: function( context, args ) { if ( !cancelled && !fired && !firing ) { // make sure args are available (#8421) args = args || []; firing = 1; try { while( callbacks[ 0 ] ) { callbacks.shift().apply( context, args );//shifts a callback, and applies it to document } } finally { fired = [ context, args ]; firing = 0; } } return this; }, // resolve with this as context and given arguments resolve: function() { deferred.resolveWith( this, arguments ); return this; }, // Has this deferred been resolved? isResolved: function() { return !!( firing || fired ); }, // Cancel cancel: function() { cancelled = 1; callbacks = []; return this; } }; return deferred; }, type: function( obj ) { return obj == null ? String( obj ) : class2type[ Object.prototype.toString.call(obj) ] || "object"; } } // The DOM ready check for Internet Explorer function doScrollCheck() { if ( ReadyObj.isReady ) { return; } try { // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ document.documentElement.doScroll("left"); } catch(e) { setTimeout( doScrollCheck, 1 ); return; } // and execute any waiting functions ReadyObj.ready(); } // Cleanup functions for the document ready method if ( document.addEventListener ) { DOMContentLoaded = function() { document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); ReadyObj.ready(); }; } else if ( document.attachEvent ) { DOMContentLoaded = function() { // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). if ( document.readyState === "complete" ) { document.detachEvent( "onreadystatechange", DOMContentLoaded ); ReadyObj.ready(); } }; } function ready( fn ) { // Attach the listeners ReadyObj.bindReady(); var type = ReadyObj.type( fn ); // Add the callback readyList.done( fn );//readyList is result of _Deferred() } return ready; })();

사용하는 방법:

 <script> ready(function(){ alert('It works!'); }); ready(function(){ alert('Also works!'); }); </script>

이 코드가 얼마나 기능적인지 잘 모르겠지만 피상적인 테스트에서는 잘 작동했습니다. 시간이 꽤 걸리므로 귀하와 다른 사람들이 혜택을 받을 수 있기를 바랍니다.

추신.: 컴파일 하는 것이 좋습니다.

또는 http://dustindiaz.com/smallest-domready-ever 를 사용할 수 있습니다.

 function r(f){/in/.test(document.readyState)?setTimeout(r,9,f):f()} r(function(){/*code to run*/});

또는 새 브라우저만 지원해야 하는 경우 기본 기능(jQuery가 준비된 것과 달리 페이지가 로드된 후 추가하면 실행되지 않음)

 document.addEventListener('DOMContentLoaded',function(){/*fun code to run*/})

Timo Huovinen

세 가지 옵션:

1. script 가 본문의 마지막 태그인 경우 스크립트 태그가 실행되기 전에 DOM이 준비됩니다.
2. DOM이 준비되면 "readyState"가 "완료"로 변경됩니다.
3. 모든 것을 'DOMContentLoaded' 이벤트 리스너 아래에 두십시오.

준비 상태 변경

 document.onreadystatechange = function () { if (document.readyState == "complete") { // document is ready. Do your stuff here } }

출처: MDN

DOMContentLoaded

 document.addEventListener('DOMContentLoaded', function() { console.log('document is ready. I can sleep now'); });

석기 시대 브라우저에 대한 우려 : jQuery 소스 코드로 이동하여 ready 기능을 사용하십시오. 이 경우 전체 라이브러리를 구문 분석하고 실행하지 않고 아주 작은 부분만 수행합니다.

Jhankar Mahbub

</body> 태그 바로 <script>/*JavaScript code*/</script> 를 배치합니다.

document.ready 에서 무언가를 하는 것보다 HTML 파일을 변경해야 하기 때문에 모든 사람의 목적에 적합하지 않을 수 있지만 여전히...

rob

가난한 사람의 해결책:

 var checkLoad = function() { document.readyState !== "complete" ? setTimeout(checkLoad, 11) : alert("loaded!"); }; checkLoad();

바이올린 보기

이것을 추가했습니다. 조금 더 나은 것 같습니다. 자체 범위 및 비 재귀 적

 (function(){ var tId = setInterval(function() { if (document.readyState == "complete") onComplete() }, 11); function onComplete(){ clearInterval(tId); alert("loaded!"); }; })()

바이올린 보기

Jakob Sternberg

나는 이것을 사용한다:

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

참고: 이것은 특히 다음과 같은 최신 브라우저에서만 작동합니다. http://caniuse.com/#feat=domcontentloaded

Dustin Davis

실제로 Internet Explorer 9 이상 에만 관심이 있다면 jQuery.ready 를 대체하기에 충분합니다.

 document.addEventListener("DOMContentLoaded", callback);

---

Internet Explorer 6 과 정말 이상하고 희귀한 브라우저에 대해 걱정한다면 다음과 같이 작동합니다.

 domReady: function (callback) { // Mozilla, Opera and WebKit if (document.addEventListener) { document.addEventListener("DOMContentLoaded", callback, false); // If Internet Explorer, the event model is used } else if (document.attachEvent) { document.attachEvent("onreadystatechange", function() { if (document.readyState === "complete" ) { callback(); } }); // A fallback to window.onload, that will always work } else { var oldOnload = window.onload; window.onload = function () { oldOnload && oldOnload(); callback(); } } },

Dan

이 질문은 꽤 오래 전에 제기되었습니다. 이 질문을 방금 본 사람을 위해 "Jquery가 필요하지 않을 수도 있습니다" 라는 사이트가 있습니다. 이 사이트는 필요한 IE 지원 수준에 따라 jquery의 모든 기능을 분류하고 몇 가지 대안적인 작은 라이브러리를 제공합니다.

IE8 문서 준비 스크립트 는 jquery가 필요하지 않을 수 있습니다.

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

chugadie

2020년이고 <script> 태그에 defer 속성이 있습니다.

예를 들어:

 <script src="demo_defer.js" defer></script>

페이지 구문 분석이 완료되면 스크립트가 실행되도록 지정합니다.

https://www.w3schools.com/tags/att_script_defer.asp

Mikser

나는 최근에 이것을 모바일 사이트에 사용하고 있었습니다. 이것은 "Pro JavaScript Techniques"에서 John Resig의 단순화된 버전입니다. addEvent에 따라 다릅니다.

 var ready = ( function () { function ready( f ) { if( ready.done ) return f(); if( ready.timer ) { ready.ready.push(f); } else { addEvent( window, "load", isDOMReady ); ready.ready = [ f ]; ready.timer = setInterval(isDOMReady, 13); } }; function isDOMReady() { if( ready.done ) return false; if( document && document.getElementsByTagName && document.getElementById && document.body ) { clearInterval( ready.timer ); ready.timer = null; for( var i = 0; i < ready.ready.length; i++ ) { ready.ready[i](); } ready.ready = null; ready.done = true; } } return ready; })();

James

브라우저 간(이전 브라우저도 마찬가지) 및 간단한 솔루션:

 var docLoaded = setInterval(function () { if(document.readyState !== "complete") return; clearInterval(docLoaded); /* Your code goes here ie init() */ }, 30);

jsfiddle에서 경고 표시

Pawel

jQuery 답변은 나에게 꽤 유용했습니다. 약간의 리팩토링으로 내 요구에 잘 맞았습니다. 나는 그것이 다른 사람을 돕기를 바랍니다.

 function onReady ( callback ){ var addListener = document.addEventListener || document.attachEvent, removeListener = document.removeEventListener || document.detachEvent eventName = document.addEventListener ? "DOMContentLoaded" : "onreadystatechange" addListener.call(document, eventName, function(){ removeListener( eventName, arguments.callee, false ) callback() }, false ) }

Miere

다음은 모든 브라우저(IE 8 포함)에서 작동하는 DOM 준비를 테스트하기 위한 가장 작은 코드 조각입니다.

 r(function(){ alert('DOM Ready!'); }); function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

이 답변을 참조하십시오.

Antara Roy

HTML 페이지 하단에 이것을 추가하기만 하면 됩니다...

 <script> Your_Function(); </script>

HTML 문서는 위에서 아래로 구문 분석되기 때문입니다.

davefrassoni

Rock Solid addEvent() 및 http://www.braksator.com/how-to-make-your-own-jquery 에서 살펴볼 가치가 있습니다.

사이트가 다운되는 경우의 코드는 다음과 같습니다.

 function addEvent(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); EventCache.add(obj, type, fn); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent( "on"+type, obj[type+fn] ); EventCache.add(obj, type, fn); } else { obj["on"+type] = obj["e"+type+fn]; } } var EventCache = function(){ var listEvents = []; return { listEvents : listEvents, add : function(node, sEventName, fHandler){ listEvents.push(arguments); }, flush : function(){ var i, item; for(i = listEvents.length - 1; i >= 0; i = i - 1){ item = listEvents[i]; if(item[0].removeEventListener){ item[0].removeEventListener(item[1], item[2], item[3]); }; if(item[1].substring(0, 2) != "on"){ item[1] = "on" + item[1]; }; if(item[0].detachEvent){ item[0].detachEvent(item[1], item[2]); }; item[0][item[1]] = null; }; } }; }(); // Usage addEvent(window, 'unload', EventCache.flush); addEvent(window, 'load', function(){alert("I'm ready");});

Ben

가장 최소한의 작업과 100% 작동

나는 PlainJS 에서 답을 선택했고 그것은 나를 위해 잘 작동합니다. 모든 브라우저에서 허용될 수 있도록 DOMContentLoaded 확장합니다.

---

이 함수는 jQuery의 $(document).ready() 메서드와 동일합니다.

 document.addEventListener('DOMContentLoaded', function(){ // do something });

그러나 jQuery와 달리 이 코드는 최신 브라우저(IE > 8)에서만 제대로 실행되며 이 스크립트가 삽입될 때 문서가 이미 렌더링된 경우(예: Ajax를 통해) 실행되지 않습니다. 따라서 이것을 약간 확장해야 합니다.

 function run() { // do something } // in case the document is already rendered if (document.readyState!='loading') run(); // modern browsers else if (document.addEventListener) document.addEventListener('DOMContentLoaded', run); // IE <= 8 else document.attachEvent('onreadystatechange', function(){ if (document.readyState=='complete') run(); });

이것은 기본적으로 모든 가능성을 다루며 jQuery 도우미에 대한 실행 가능한 대체품입니다.

Shivam Sharma

이 브라우저 간 코드는 DOM이 준비되면 함수를 호출합니다.

 var domReady=function(func){ var scriptText='('+func+')();'; var scriptElement=document.createElement('script'); scriptElement.innerText=scriptText; document.body.appendChild(scriptElement); };

작동 방식은 다음과 같습니다.

1. domReady 의 첫 번째 줄은 toString 메서드를 호출하여 전달한 함수의 문자열 표현을 가져오고 함수를 즉시 호출하는 표현식으로 래핑합니다.
2. 나머지 domReady 는 표현식으로 스크립트 요소를 생성하고 문서 body
3. 브라우저는 DOM이 준비된 후 body 추가된 스크립트 태그를 실행합니다.

예를 들어 다음과 같이 하면 domReady(function(){alert();}); , 다음이 body 요소에 추가됩니다.

 <script>(function (){alert();})();</script>

이것은 사용자 정의 함수에서만 작동합니다. 다음은 작동하지 않습니다: domReady(alert);

Max Heiber

jQuery와 비교하여 JavaScript에 상응하는 것을 사용하는 것이 항상 좋습니다. 한 가지 이유는 의존할 라이브러리가 하나 적고 jQuery에 상응하는 것보다 훨씬 빠릅니다.

jQuery 등가물에 대한 환상적인 참조 중 하나는 http://youmightnotneedjquery.com/ 입니다.

귀하의 질문에 관한 한 위의 링크에서 아래 코드를 가져왔습니다. 주의 사항은 Internet Explorer 9 이상 에서만 작동한다는 것입니다.

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

Vatsal

이 솔루션은 어떻습니까?

 // other onload attached earlier window.onload=function() { alert('test'); }; tmpPreviousFunction=window.onload ? window.onload : null; // our onload function window.onload=function() { alert('another message'); // execute previous one if (tmpPreviousFunction) tmpPreviousFunction(); };

mike

최소한의 구현으로 가장 간단한 경우에 트릭을 수행할 수 있는 빠르고 더러운 크로스 브라우저 구현을 찾았습니다.

 window.onReady = function onReady(fn){ document.body ? fn() : setTimeout(function(){ onReady(fn);},50); };

malko

비교

여기(아래 스니펫에서)는 사용 가능한 브라우저 "내장" 방법과 그 실행 순서를 비교한 것입니다. 비고

• document.onload (X)는 최신 브라우저에서 지원되지 않습니다(이벤트가 발생 하지 않음).
• <body onload="bodyOnLoad()"> (F)를 사용하고 동시에 window.onload (E)를 사용하면 첫 번째 항목만 실행됩니다(두 번째 항목을 재정의하기 때문에)
• <body onload="..."> (F)에 제공된 이벤트 핸들러 onload 함수에 의해 래핑됩니다.
• document.onreadystatechange (D) document .addEventListener('readystatechange'...) (C) 아마도 onXYZevent onXYZevent-like addEventListener 대기열(여러 리스너 추가를 허용함)과 독립적일 수 있습니다. 아마도 이 두 핸들러가 실행되는 사이에는 아무 일도 일어나지 않을 것입니다.
• 모든 스크립트는 콘솔에 타임스탬프를 쓰지만 div 액세스할 수 있는 스크립트는 본문에도 타임스탬프를 씁니다(스크립트 실행 후 "전체 페이지" 링크를 클릭하면 볼 수 있음).
• 솔루션 readystatechange (C,D)는 브라우저에 의해 여러 번 실행되지만 다른 문서 상태에 대해 실행됩니다.
• loading - 문서가 로드 중입니다(스니펫에서 실행되지 않음)
• Interactive - DOMContentLoaded 전에 문서가 구문 분석되고 시작 DOMContentLoaded
• complete - 문서 및 리소스가 로드되고 body/window onload

 <html> <head> <script> // solution A console.log(`[timestamp: ${Date.now()}] A: Head script`) ; // solution B document.addEventListener("DOMContentLoaded", () => { print(`[timestamp: ${Date.now()}] B: DOMContentLoaded`); }); // solution C document.addEventListener('readystatechange', () => { print(`[timestamp: ${Date.now()}] C: ReadyState: ${document.readyState}`); }); // solution D document.onreadystatechange = s=> {print(`[timestamp: ${Date.now()}] D: document.onreadystatechange ReadyState: ${document.readyState}`)}; // solution E (never executed) window.onload = () => { print(`E: <body onload="..."> override this handler`); }; // solution F function bodyOnLoad() { print(`[timestamp: ${Date.now()}] F: <body onload='...'>`); infoAboutOnLoad(); // additional info } // solution X document.onload = () => {print(`document.onload is never fired`)}; // HELPERS function print(txt) { console.log(txt); if(mydiv) mydiv.innerHTML += txt.replace('<','&lt;').replace('>','&gt;') + '<br>'; } function infoAboutOnLoad() { console.log("window.onload (after override):", (''+document.body.onload).replace(/\s+/g,' ')); console.log(`body.onload==window.onload --> ${document.body.onload==window.onload}`); } console.log("window.onload (before override):", (''+document.body.onload).replace(/\s+/g,' ')); </script> </head> <body onload="bodyOnLoad()"> <div id="mydiv"></div> <!-- this script must te at the bottom of <body> --> <script> // solution G print(`[timestamp: ${Date.now()}] G: <body> bottom script`); </script> </body> </html>

Kamil Kiełczewski

아주 오래된 브라우저를 지원할 필요가 없다면 외부 스크립트가 async 속성으로 로드된 경우에도 지원하는 방법이 있습니다.

 HTMLDocument.prototype.ready = new Promise(function(resolve) { if(document.readyState != "loading") resolve(); else document.addEventListener("DOMContentLoaded", function() { resolve(); }); }); document.ready.then(function() { console.log("document.ready"); });

user4617883

나는 단순히 다음을 사용합니다.

 setTimeout(function(){ //reference/manipulate DOM here });

document.addEventListener("DOMContentLoaded" //etc 와 달리 최상위 답변에서와 같이 IE9까지 작동합니다. http://caniuse.com/#search=DOMContentLoaded 는 IE11까지만 나타냅니다.

흥미롭게도 2009년 setTimeout 솔루션을 우연히 발견했습니다. DOM의 준비 상태를 확인하는 것이 과도합니까? "DOM의 준비 상태를 확인하기 위해 다양한 프레임워크의 보다 복잡한 접근 방식을 사용하는 것이 과도한가?"

이 기술이 작동하는 이유에 대한 가장 좋은 설명은 이러한 setTimeout이 있는 스크립트에 도달했을 때 DOM이 구문 분석되는 중이므로 해당 작업이 완료될 때까지 setTimeout 내의 코드 실행이 지연된다는 것입니다.

Dexygen

이것은 작동해야 합니다:

 document.addEventListener('DOMContentLoaded', function() { /* alert('Page loaded!'); some code more code */ });

UserName Name

IE9+의 경우:

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

Joaquinglezsantos

여기에 내가 사용하는 것이 있습니다. 빠르고 모든 기반을 다룹니다. IE <9를 제외한 모든 경우에 작동합니다.

 (() => { function fn() { // "On document ready" commands: console.log(document.readyState); }; if (document.readyState != 'loading') {fn()} else {document.addEventListener('DOMContentLoaded', fn)} })();

이것은 모든 경우를 잡는 것 같습니다.

• DOM이 이미 준비된 경우 즉시 실행됩니다(DOM이 "로드 중"이 아니라 "대화형" 또는 "완료" 중 하나인 경우)
• DOM이 여전히 로드 중이면 DOM을 사용할 수 있는 경우(대화형) 이벤트 리스너를 설정합니다.

DOMContentLoaded 이벤트는 IE9 및 기타 모든 것에서 사용할 수 있으므로 개인적으로 이것을 사용하는 것이 좋다고 생각합니다. ES2015에서 ES5로 코드를 변환하지 않는 경우 화살표 함수 선언을 일반 익명 함수로 다시 작성하십시오.

모든 자산이 로드되고 모든 이미지가 표시될 때까지 기다리려면 대신 window.onload를 사용하십시오.

Olemak

여기에 제시된 setTimeout/setInterval 솔루션은 특정 상황에서만 작동합니다.

문제는 특히 8 이하의 이전 Internet Explorer 버전에서 나타납니다.

이러한 setTimeout/setInterval 솔루션의 성공에 영향을 미치는 변수는 다음과 같습니다.

 1) dynamic or static HTML 2) cached or non cached requests 3) size of the complete HTML document 4) chunked or non chunked transfer encoding

이 특정 문제를 해결하는 원본(네이티브 자바스크립트) 코드는 다음과 같습니다.

 https://github.com/dperini/ContentLoaded http://javascript.nwbox.com/ContentLoaded (test)

이것은 jQuery 팀이 구현을 구축한 코드입니다.

Diego Perini

BODY 하단 부근에 jQuery를 로드하고 있는데 jQuery(<func>) 또는 jQuery(document).ready(<func>)를 작성하는 코드에 문제가 있는 경우 Github 에서 jqShim을 확인하십시오.

자체 문서 준비 기능을 다시 만드는 대신 jQuery를 사용할 수 있을 때까지 기능을 유지한 다음 예상대로 jQuery를 진행합니다. jQuery를 본문의 맨 아래로 이동하는 요점은 페이지 로드 속도를 높이는 것이며 템플릿 헤드에 jqShim.min.js를 인라인하여 여전히 수행할 수 있습니다.

나는 WordPress의 모든 스크립트를 바닥글로 옮기기 위해 이 코드를 작성했고 이제 이 shim 코드만 머리글에 직접 위치합니다.

Matt Pileggi

function onDocReady(fn){ $d.readyState!=="loading" ? fn():document.addEventListener('DOMContentLoaded',fn); } function onWinLoad(fn){ $d.readyState==="complete") ? fn(): window.addEventListener('load',fn); }

onDocReady 는 HTML dom이 완전히 액세스/분석/조작할 준비가 되었을 때 콜백을 제공합니다.

onWinLoad 는 모든 것이 로드되었을 때(이미지 등) 콜백을 제공합니다.

• 이러한 함수는 원할 때마다 호출할 수 있습니다.
• 여러 "청취자"를 지원합니다.
• 모든 브라우저에서 작동합니다.

Jakob Sternberg

(function(f){ if(document.readyState != "loading") f(); else document.addEventListener("DOMContentLoaded", f); })(function(){ console.log("The Document is ready"); });

Dustin Poissant

출처 : http:www.stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery