programing

$(표준)jQuery를 사용하지 않는 ready 등가물

goodsources 2022. 9. 4. 20:16
반응형

$(표준)jQuery를 사용하지 않는 ready 등가물

$(document).ready, jQueryj 이외의 질문하다질문하다

나만의 '오빠'를 할 수 요?$(document).readyj를 사용하지 않는 질문하다를 하면 알 수 .window.onload 않다window.onload는 모든 이미지, 프레임 등이 로드된 후에 실행됩니다.

기반의.DOMContentLoadedIE8은 아니지만 99% 이상의 브라우저에서 지원됩니다.

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

편집:

jQuery ready를 대체할 수 있는 것은 다음과 같습니다.

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.ready()1.6jQuery 1.6.2 에 합니다.

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 ready와 달리 페이지가 로드된 후 이 기능을 추가하면 실행되지 않습니다)

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

3가지 옵션:

  1. ifscript되기 전에 됩니다.스크립트 태그가 실행되기 전에 DOM이 준비됩니다.
  2. DOM 가 준비되면, 「ready State」가 「complete」로 바뀝니다.
  3. 모든 내용을 'DOMContentLoaded' 이벤트 리스너에 넣습니다.

준비 상태 변경

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

출처 : MDN

DOM Content 로드 완료

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

석기시대 브라우저에 대한 우려: jQuery 소스 코드로 이동하여ready 를 구문 합니다.이 경우 라이브러리 전체를 구문 분석+실행하지 않고 극히 일부만 수행합니다.

★★를 합니다.<script>/*JavaScript code*/</script>폐점 직전에 </body>붙이다

a la, JavaScript 파일 모든 사용자의 수 .document.ready★★★★★★★★★★★★。

불쌍한 남자의 해결책:

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

바이올린을 표시하다

나는 이것을 사용한다.

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

주의: 이것은 새로운 브라우저, 특히 http://caniuse.com/#domcontent=domcontentloaded에서만 작동합니다.

, 2020년입니다.<script>태그에는 다음이 있습니다.defer여하하다

예를 들어 다음과 같습니다.

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

페이지의 해석이 종료되었을 때 스크립트가 실행되도록 지정합니다.

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

이 질문은 꽤 오래전에 한 질문이다.이 질문을 접한 모든 사용자에게 필요한 IE 지원 수준에 따라 jquery의 모든 기능을 분류하고 대체적이고 작은 라이브러리를 제공하는 "jquery need 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();
        });
}

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

크로스 브라우저(구 브라우저도 마찬가지) 및 간단한 솔루션:

var docLoaded = setInterval(function () {
    if(document.readyState !== "complete") return;
    clearInterval(docLoaded);

    /*
        Your code goes here i.e. init()
    */
}, 30);

jsfiddle로 경고 표시

저는 최근에 모바일 사이트에서 이것을 사용하고 있었습니다.이것은 "Pro JavaScript Technologies"에서 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;
})();

2022년판

2022년에는 delay 속성을 스크립트에 넣고 헤드에 로드하기만 하면 됩니다.

참고 자료: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer

<!doctype html>
<html>
<head>
  <script src="/script.js" defer></script>
</head>
<body>

 <p>In 2022, all you need to do is put the defer attribute on your script, and load it in the head!</p>

</body>
</html>

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

다음은 모든 브라우저(IE 8도)에서 동작하는 DOM Ready를 테스트하기 위한 최소 코드 조각입니다.

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

이 답을 보세요.

HTML 페이지 하단에 추가...

<script>
    Your_Function();
</script>

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

최소로 100% 기능

저는 Plain Js에서 답을 선택했고, 잘 작동하고 있습니다.연장하다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 도우미를 대체할 수 있습니다.

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

jQuery에 비해 JavaScript와 동등한 기능을 사용하는 것이 좋습니다.한 가지 이유는 의존해야 할 라이브러리가 하나 적기 때문에 jQuery 등가물보다 훨씬 빠르기 때문입니다.

jQuery에 대응하는 훌륭한 레퍼런스 중 하나는 http://youmightnotneedjquery.com/입니다.

질문하신 내용에 대해서는 위의 링크에서 다음 코드를 취했습니다.:) 다만 주의할 점은 Internet Explorer 9 이후에서만 동작한다는 것입니다.

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

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

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

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

  1. 의 첫 줄domReady는 함수의 메서드를 호출하여 전달된 함수의 문자열 표현을 가져오고 함수를 즉시 호출하는 식으로 래핑합니다.
  2. ★★★domReady하여 expression에 합니다.body를 참조해 주세요.
  3. 해, 「」에 합니다.bodyDOM ★★★★★★★★ 。

들어 이렇게, 이렇게 됩니다.domReady(function(){alert();}); , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , .body★★★★

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

이 기능은 사용자 정의 함수에서만 사용할 수 있습니다.하지 않습니다.domReady(alert);

이 솔루션은 어떻습니까?

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

델은 최소한의 구현으로 대부분의 간단한 경우 효과를 얻을 수 있는 빠르고 더러운 크로스 브라우저 구현을 발견했습니다.

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

사용법은 다음과 같습니다.

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

리르르르 와는 달리document.addEventListener("DOMContentLoaded" //etc맨 위의 답변과 마찬가지로 IE9까지 동작합니다.http://caniuse.com/ #search=DOMContentLoaded는 IE11까지만 나타냅니다.

도 나는 이 일을 발견했다.setTimeout2009년의 솔루션:DOM의 준비 상태를 체크하는 것은 오버킬인가.이것은, 「다양한 프레임워크의 보다 복잡한 어프로치를 사용해 DOM의 준비 상태를 체크하는 것은 오버킬인가」라고 하는 의미입니다.

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

비교

여기(아래 스니펫)는 선택한 사용 가능한 브라우저의 "내장" 메서드와 실행 시퀀스를 비교한 것입니다.언급

  • document.onload(X)는 최신 브라우저에서는 지원되지 않습니다(이벤트는 발생하지 않습니다).
  • 을 쓰면<body onload="bodyOnLoad()">에 (F)window.onload 첫 두 번째에). (E) 1개만 실행됩니다(E).
  • 됩니다.<body onload="...">를 (F)로 .onload
  • document.onreadystatechange 덮어쓰기 안 함(D)document .addEventListener('readystatechange'...) (C) 마 cecasueonXYZevent-like입니다.addEventListener큐(복수의 리스너를 추가할 수 있습니다).이 두 핸들러의 실행 사이에는 아마 아무 일도 일어나지 않을 것입니다.
  • 단, ""에 할 수 있는 " """는 ""이다"", ""이다""에 액세스 할 수 있습니다.div타임스탬프도 본문에 씁니다(스크립트 실행 후 "전체 페이지" 링크를 클릭하면 볼 수 있습니다).
  • ★★★readystatechange 여러 번 (C,D)는 서로 다르다.
  • loading - 문서 로드 중(스니펫으로 부팅되지 않음)
  • interactive - 문서가 구문 분석되고 실행되기 전에 실행됩니다.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>

순수 JavaScript를 사용하는 가장 간단한 방법입니다.jQuery 사용 안 함:

document.addEventListener("DOMContentLoaded", function(event) {
   // Your code to run since DOM is loaded and ready
});

제가 사용하는 것은 다음과 같습니다.빠르고 모든 베이스를 커버합니다.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을 사용할 수 있는(대화형) 이벤트청취자를 설정합니다.

DOMContent Loaded 이벤트는 IE9 등에서 이용할 수 있기 때문에 개인적으로는 이것을 사용해도 좋다고 생각합니다.ES2015에서 ES5로 코드를 변환하지 않을 경우 화살표 함수 선언을 일반 익명 함수로 다시 작성합니다.

모든 자산이 로드될 때까지 기다리려면 표시되는 모든 이미지 등이 window.onload를 대신 사용합니다.

오래된 브라우저를 지원할 필요가 없는 경우 외부 스크립트가 비동기 속성으로 로드되어 있는 경우에도 이를 수행할 수 있는 방법은 다음과 같습니다.

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

요즘은 모듈을 사용해야 합니다.코드를 모듈의 기본 함수에 넣고 함수를 스크립트 요소로 Import합니다.

client.js:

export default function ()
{
  alert ("test");
}

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>test</title>
  </head>
  <body>
    <script type="module">
      import main from './client.js';
      main ();
    </script>
  </body>
</html>

IE9+의 경우:

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

set Timeout/set여기에 제시된 인터벌솔루션은 특정 상황에서만 기능합니다.

이 문제는 특히 Internet Explorer 8 이전 버전에서 발생합니다.

이러한 set Timeout/set의 성공에 영향을 미치는 변수인터벌 솔루션은 다음과 같습니다.

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

이 특정 문제를 해결하는 원본(네이티브 Javascript) 코드는 다음과 같습니다.

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

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

BODY 하단 부근에서 jQuery를 로드하고 있지만 jQuery(<func>) 또는 jQuery(문서)를 쓰는 코드에 문제가 있는 경우.ready(<func>), github의 jqShim을 확인합니다.

자체 문서 준비 기능을 다시 만드는 것이 아니라 jQuery를 사용할 수 있을 때까지 기능을 유지한 후 예상대로 jQuery를 진행합니다.jQuery를 본문 하단으로 이동시키는 목적은 페이지 로드를 고속화하는 것입니다.또, 템플릿의 선두에 jqSim.min.js 를 삽입하는 것으로, 그것을 실현할 수 있습니다.

WordPress의 모든 스크립트를 바닥글에 이동시키기 위해 이 코드를 작성했습니다.이 심 코드만 헤더에 직접 배치됩니다.

언급URL : https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery

반응형

'programing' 카테고리의 다른 글

Spring Boot 2.5.0은 plain.jar 파일을 생성합니다.제거할 수 있나요?  (0) 2022.09.04
Python에서 "named tuples"는 무엇입니까?  (0) 2022.09.04
스프링 부트 내장 HornetQ 클러스터가 메시지를 전달하지 않음  (0) 2022.09.04
SHOW PROCESS LIST에서 전체 쿼리를 표시하는 방법  (0) 2022.09.04
Java 한 문자열에서 여러 개의 서로 다른 서브스트링을 동시에 치환(또는 가장 효율적인 방법으로)  (0) 2022.09.04

'programing'의 다른글

  • 현재글$(표준)jQuery를 사용하지 않는 ready 등가물

관련글

댓글

티스토리툴바