Was ist das Nicht-JQuery-Äquivalent von "$(document).ready()"?

Question

Was ist das Nicht-JQuery-Äquivalent von $(document).ready() ?

Answer 1

Dies funktioniert perfekt, von der ECMA. Das Snippet ist alles, was Sie brauchen, aber wenn Sie mehr wissen und andere Optionen erkunden wollen, lesen Sie das ausführliche Erklärung .

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

El window.onload ist nicht gleich JQuery $(document).ready denn $(document).ready wartet nur auf den DOM-Baum, während window.onload alle Elemente, einschließlich externer Assets und Bilder, überprüfen.

EDIT : IE8 und älteres Äquivalent hinzugefügt, danke an Jan Derk die Beobachtung. Sie können die Quelle für diesen Code auf MDN:

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

Es gibt noch andere Möglichkeiten als "interactive" . Siehe die MDN-Dokumente für Einzelheiten.

Answer 2

Jetzt, im Jahr 2018, gibt es eine schnelle und einfache Methode.

Dies fügt einen Ereignis-Listener hinzu, aber wenn es bereits ausgelöst wurde, prüfen wir, ob das Dom in einem bereiten Zustand ist oder ob es vollständig ist. Dies kann vor oder nach dem Laden von Sub-Ressourcen (Bilder, Stylesheets, Frames, etc.) ausgelöst werden.

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

Zusätzliche Lektüre

• https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
  • Prüfen, ob das Laden bereits abgeschlossen ist
• https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

---

Update

Hier sind einige schnelle Hilfsprogramme mit Standard-ES6-Import und -Export, die ich geschrieben habe und die auch TypeScript enthalten. Vielleicht schaffe ich es, daraus eine schnelle Bibliothek zu machen, die in Projekten als Abhängigkeit installiert werden kann.

JavaScript

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

TypScript

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

Versprechen

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

Answer 3

Eine kleine Sache, die ich zusammengestellt habe

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

Wie man es benutzt

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

Sie können auch den Kontext ändern, in dem der Callback ausgeführt wird, indem Sie ein zweites Argument übergeben

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

domReady(init, console);

Answer 4

Es gibt einen auf Standards basierenden Ersatz

DOMContentLoaded, die von mehr als 90% der Browser unterstützt wird, aber nicht IE8 (daher wird der folgende Code von JQuery für die Browserunterstützung verwendet)

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

jQuery's eigene Funktion ist viel komplizierter als nur window.onload, wie unten dargestellt.

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

Answer 5

Nach Angaben von http://youmightnotneedjquery.com/#ready ein guter Ersatz, der auch mit IE8 funktioniert, ist

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

Verbesserungen : Ich persönlich würde auch prüfen, ob der Typ der fn ist eine Funktion. Und als @elliottregan vorgeschlagen, den Ereignis-Listener nach der Verwendung zu entfernen.

function ready(fn) {
  if (typeof fn !== 'function') {
    throw new Error('Argument passed to ready should be a function');
  }

  if (document.readyState != 'loading') {
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn, {
      once: true // A boolean value indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.
    });
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

// tests
try {
  window.ready(5);
} catch (ex) {
  console.log(ex.message);
}

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

Ich beantworte diese Frage mit Verspätung, weil ich nach dieser Antwort gesucht habe, sie aber hier nicht finden konnte. Und ich denke, dies ist die beste Lösung.