Edit:

Oto realny zamiennik dla 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
});

Wzięte z https://plainjs.com/javascript/events/running-code-when-the-document-is-ready-15/

Kolejna dobra funkcja domReady wzięta z https://stackoverflow.com/a/9899701/175071

Ponieważ zaakceptowana odpowiedź była bardzo daleka od zakończenia, połączyłem" gotową " funkcję jak jQuery.ready() opartą na jQuery 1.6.2 source:

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

Jak użycie:

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

Nie jestem pewien, jak funkcjonalny jest ten kod, ale działał dobrze z moimi powierzchownymi testami. Zajęło to sporo czasu, więc mam nadzieję, że ty i inni możecie z tego skorzystać.

PS.: Proponuję kompilowanie to.

Lub możesz użyć http://dustindiaz.com/smallest-domready-ever :

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

Lub natywną funkcję, jeśli potrzebujesz tylko obsługiwać nowe przeglądarki (w przeciwieństwie do jQuery ready, nie uruchomi się, jeśli dodasz ją po załadowaniu strony)

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

Trzy opcje:

1. Jeśli script jest ostatnim znacznikiem ciała, DOM będzie gotowy przed wykonaniem znacznika script
Gdy DOM jest gotowy, "readyState" zmieni się na"complete"
2. Umieść wszystko pod 'domcontentloaded' Event listener

onreadystatechange

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

Źródło: MDN

Domcontent

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

dotyczy przeglądarek z epoki kamienia: Idź. do kodu źródłowego jQuery i użyj funkcji ready. W takim przypadku nie parsujesz + wykonujesz całą bibliotekę, którą robisz tylko bardzo małą jej część.

Umieść swój <script>/*JavaScript code*/</script> w prawo przed zamknięciem </body> tag.

Co prawda, może to nie pasować do wszystkich celów, ponieważ wymaga zmiany pliku HTML, a nie tylko robienia czegoś w pliku JavaScript a la document.ready, ale i tak...

Poor man ' s solution:

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

checkLoad();  

View

Dodałem ten, chyba trochę lepszy, własny zakres i nie rekurencyjny

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

View

Używam tego:

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

Uwaga: prawdopodobnie działa to tylko z nowszymi przeglądarkami, zwłaszcza tymi: http://caniuse.com/#feat=domcontentloaded

Naprawdę, jeśli zależy ci naInternet Explorer 9+ tylko ten kod wystarczy by zastąpić jQuery.ready:

    document.addEventListener("DOMContentLoaded", callback);

Jeśli martwisz się o Internet Explorer 6 i kilka naprawdę dziwnych i rzadkich przeglądarek, to zadziała:

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

To pytanie zadano dość dawno temu. Dla każdego, kto tylko widzi to pytanie, istnieje teraz Strona o nazwie "you might not need jquery", która rozkłada - według poziomu wymaganej obsługi IE-wszystkie funkcje jquery i zapewnia alternatywne, mniejsze biblioteki.

Skrypt gotowy do dokumentów IE8 zgodnie z możesz nie potrzebować 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();
        });
}

Ostatnio używałem tego na stronie mobilnej. Jest to uproszczona wersja Johna Resiga z "Pro JavaScript Techniques". To zależy od 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;
})();

Cross-browser (stare przeglądarki też) i proste rozwiązanie:

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

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

Wyświetlanie alertu w jsfiddle

Jest rok 2020 i <script> tag ma atrybut defer.

Na przykład:

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

Określa, że skrypt jest wykonywany po zakończeniu parsowania strony.

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

Odpowiedź jQuery była dla mnie bardzo przydatna. Przy odrobinie refaktorii dobrze pasował do moich potrzeb. Mam nadzieję, że komuś to pomoże.

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

Oto najmniejszy fragment kodu do testowania DOM ready, który działa we wszystkich przeglądarkach (nawet IE 8):

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

Zobacz tę ODPOWIEDŹ .

Po prostu dodaj to na dole strony HTML...

<script>
    Your_Function();
</script>

Ponieważ dokumenty HTML są przetwarzane przez top-bottom.

Warto zajrzeć do Rock Solid addEvent() i http://www.braksator.com/how-to-make-your-own-jquery .

Oto kod na wypadek gdyby strona upadła

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

Najbardziej minimalne i w 100% działające

Wybrałem odpowiedź z PlainJS i działa dobrze dla mnie. Rozszerza DOMContentLoaded tak, że może być akceptowane we wszystkich przeglądarkach.

Ta funkcja jest odpowiednikiem metody jQuery $(document).ready():

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

Jednak, w przeciwieństwie do jQuery, ten kod będzie działał poprawnie tylko w nowoczesnych przeglądarkach (IE > 8) i nie będzie w przypadku, gdy dokument jest już renderowany w momencie wstawiania tego skryptu (np. przez Ajax). Dlatego, musimy to trochę rozszerzyć:

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

Obejmuje to w zasadzie wszystkie możliwości i jest realnym zamiennikiem jQuery helper.

Ten kod między przeglądarkami wywoła funkcję, gdy DOM jest gotowy:

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

Oto Jak to działa:

1. pierwsza linia domReady wywołuje toString metoda funkcji, aby uzyskać reprezentację łańcuchową przekazywanej funkcji i owinąć ją w wyrażenie, które natychmiast wywołuje funkcję.
2. reszta domReady tworzy element skryptu z wyrażeniem i dołącza go do body dokumentu.
3. przeglądarka uruchamia znaczniki skryptu dołączany do body Po tym, jak DOM jest gotowy.

Na przykład, jeśli zrobisz to: domReady(function(){alert();});, do elementu body dołączone będą następujące elementy:

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

Zauważ, że działa to tylko dla funkcji zdefiniowanych przez użytkownika. Nie działa: domReady(alert);

Zawsze dobrze jest używać odpowiedników JavaScript w porównaniu do jQuery. Jednym z powodów jest o jedną bibliotekę mniej i są one znacznie szybsze niż odpowiedniki jQuery.

Jednym z fantastycznych odniesień do odpowiedników jQuery jest http://youmightnotneedjquery.com/.

Jeśli chodzi o twoje pytanie, wziąłem poniższy kod z powyższego linku :) Tylko zastrzeżenie jest to, że działa tylko z Internet Explorer 9 i Później.

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

Co powiesz na to rozwiązanie?

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

Znaleźliśmy naszą szybką i brudną implementację cross browser, która może zadziałać w większości prostych przypadków przy minimalnej implementacji:

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

Jeśli nie musisz obsługiwać bardzo starych przeglądarek, oto sposób, aby to zrobić, nawet gdy twój zewnętrzny skrypt jest załadowany atrybutem 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");
});

Po prostu używam:

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

I w przeciwieństwie do document.addEventListener("DOMContentLoaded" //etc Jak w pierwszej odpowiedzi, działa tak daleko wstecz jak IE9 -- http://caniuse.com/#search=DOMContentLoaded wskazuje dopiero na IE11.

Co ciekawe natknąłem się na to setTimeout rozwiązanie w 2009 roku: czy sprawdzanie gotowości DOM przesada?, co prawdopodobnie mogłoby być sformułowane nieco lepiej, ponieważ miałem na myśli " czy używanie bardziej skomplikowanych podejść różnych frameworków do sprawdzania gotowość domu".

Moje najlepsze wytłumaczenie dlaczego ta technika działa jest takie, że gdy skrypt z takim setTimeout został osiągnięty, DOM jest w trakcie przetwarzania, więc wykonanie kodu w setTimeout jest odroczone do zakończenia tej operacji.

Porównanie

Tutaj (w poniższym fragmencie) znajduje się porównanie wybranych dostępnych w przeglądarce "wbudowanych" metod i ich sekwencji wykonania. Uwagi

• document.onload (X) nie jest obsługiwana przez żadną nowoczesną przeglądarkę (zdarzenie nigdy nie jest wywołane )
• jeśli użyjesz <body onload="bodyOnLoad()"> (F) i jednocześnie window.onload (E), to tylko pierwszy zostanie wykonany (ponieważ nadpisuje drugi)
• obsługa zdarzeń podana w <body onload="..."> (F) jest zawinięta przez dodatkowe onload function
• document.onreadystatechange (D) not override document .addEventListener('readystatechange'...) (C) prawdopodobnie metody cecasue {[8] } są niezależne od kolejek addEventListener (co umożliwia dodawanie wielu słuchaczy). Prawdopodobnie nic się nie dzieje między egzekucją tych dwóch opiekunów.
• wszystkie skrypty zapisują swój znacznik czasu w konsoli - ale skrypty, które mają również dostęp do div zapisują swoje znaczniki czasu również w treści (kliknij link "Pełna strona" po wykonaniu skryptu, aby go zobaczyć).
• rozwiązania readystatechange (C, D)są wykonywane wielokrotnie przez przeglądarkę, ale dla różnych stanów dokumentu:
• wczytywanie - dokument jest wczytywany (nie jest uruchamiany w snippecie)
• interactive - dokument jest parsowany, wywołany przed DOMContentLoaded
• complete - dokument i zasoby są ładowane, uruchamiane przed 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>

Oto czego używam, jest szybki i obejmuje wszystkie bazy myślę, działa na wszystko oprócz IE

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

To chyba łapie wszystkie przypadki:

• zostanie wywołane natychmiast, jeśli DOM jest już gotowy (jeśli DOM nie jest "wczytywany", ale "interaktywny" lub "kompletny")
• jeśli DOM wciąż się ładuje, ustawia detektor zdarzeń dla when the DOM jest dostępny (interaktywny).

Zdarzenie DOMContentLoaded jest dostępne w IE9 i wszystkim innym, więc osobiście uważam, że można tego użyć. Przepisz deklarację funkcji strzałki do zwykłej funkcji anonimowej, jeśli nie transponujesz kodu z ES2015 na ES5.

Jeśli chcesz poczekać, aż wszystkie zasoby zostaną załadowane, wszystkie wyświetlone obrazy itp., Użyj window.załaduj zamiast tego.

Przedstawione tutaj rozwiązania setTimeout/setInterval będą działać tylko w określonych okolicznościach.

Problem pojawia się zwłaszcza w starszych wersjach Internet Explorera do 8.

Zmienne wpływające na powodzenie tych rozwiązań setTimeout/setInterval to:

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

Oryginalny (natywny Javascript) kod rozwiązujący ten konkretny problem jest tutaj:

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

Jest to kod, z którego zespół jQuery zbudował swoją implementację.

Dla IE9+:

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

Jeśli ładujesz jQuery w dolnej części ciała, ale masz problemy z kodem, który wypisuje jQuery () lub jQuery (document).ready (), sprawdź jqShim na Githubie.

Zamiast odtworzyć własną funkcję gotową do dokumentu, po prostu przechowuje funkcje, dopóki jQuery nie będzie dostępny, a następnie kontynuuje z jQuery zgodnie z oczekiwaniami. Celem przeniesienia jQuery do dolnej części ciała jest przyspieszenie ładowania strony, a nadal można to osiągnąć poprzez inlining jqShim./ min.js w nagłówku szablonu.

Skończyłem pisząc ten kod, aby przenieść wszystkie skrypty w WordPress do stopki, i tylko ten kod shim teraz siedzi bezpośrednio w nagłówku.

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

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

OnDocReady zapewnia wywołanie zwrotne, gdy HTML dom jest gotowy do pełnego dostępu / parse / manipulować.

OnWinLoad zapewnia wywołanie zwrotne, gdy wszystko zostało załadowane (obrazy itp.)

• te funkcje mogą być wywoływane kiedy tylko chcesz.
• obsługuje wiele "słuchaczy".
• będzie działać w każdej przeglądarce.

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

Większość funkcji vanilla js Ready nie bierze pod uwagę scenariusza, w którym ustawiona jest obsługa DOMContentLoaded po dokument jest już załadowany - co oznacza, że funkcja nigdy nie uruchomi . Może się to zdarzyć, jeśli poszukasz DOMContentLoaded wewnątrz {[4] } zewnętrznego skryptu (<script async src="file.js"></script>).

Poniższy kod sprawdza DOMContentLoaded tylko wtedy, gdy readyState dokumentu nie jest już interactive lub complete.

var DOMReady = function(callback) {
  document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback());
};
DOMReady(function() {
  //DOM ready!
});

Jeśli chcesz również wspierać IE:

var DOMReady = function(callback) {
    if (document.readyState === "interactive" || document.readyState === "complete") {
        callback();
    } else if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', callback());
    } else if (document.attachEvent) {
        document.attachEvent('onreadystatechange', function() {
            if (document.readyState != 'loading') {
                callback();
            }
        });
    }
};

DOMReady(function() {
  // DOM ready!
});