$(document).ready entspricht ohne jQuery

Question

Ich habe ein Skript, das Folgendes verwendet $(document).ready , aber es verwendet nichts anderes von jQuery. Ich möchte es durch Entfernen der jQuery-Abhängigkeit aufhellen.

Wie kann ich meine eigene $(document).ready Funktionalität ohne jQuery zu verwenden? Ich weiß, dass mit window.onload wird nicht dasselbe sein, da window.onload wird ausgelöst, nachdem alle Bilder, Rahmen usw. geladen wurden.

Answer 1

Hier ist, was ich benutze, es ist schnell und deckt alle Basen ich denke; funktioniert für alles außer IE<9.

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

Dies scheint alle Fälle zu erfassen:

• wird sofort ausgelöst, wenn das DOM bereits fertig ist (wenn das DOM nicht "lädt", sondern entweder "interaktiv" oder "vollständig" ist)
• wenn das DOM noch geladen wird, wird ein Ereignis-Listener eingerichtet, wenn das DOM verfügbar ist (interaktiv).

Das DOMContentLoaded-Ereignis ist im IE9 und in allen anderen Browsern verfügbar, so dass ich persönlich denke, dass es in Ordnung ist, dieses zu verwenden. Schreiben Sie die Deklaration der Pfeilfunktion in eine reguläre anonyme Funktion um, wenn Sie Ihren Code nicht von ES2015 nach ES5 transpilieren.

Wenn Sie warten möchten, bis alle Elemente geladen sind, alle Bilder angezeigt werden usw., verwenden Sie stattdessen window.onload.

Answer 2

Wenn Sie keine sehr alten Browser unterstützen müssen, finden Sie hier eine Möglichkeit, dies auch dann zu tun, wenn Ihr externes Skript mit asynchron Attribut:

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

Answer 3

Für IE9+:

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

Answer 4

Die hier vorgestellten Lösungen setTimeout/setInterval funktionieren nur unter bestimmten Umständen.

Das Problem tritt vor allem bei älteren Internet Explorer-Versionen bis 8 auf.

Die Variablen, die den Erfolg dieser setTimeout/setInterval-Lösungen beeinflussen, sind:

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

Der Originalcode (natives Javascript), der dieses spezielle Problem löst, ist hier zu finden:

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

Dies ist der Code, auf dem das jQuery-Team seine Implementierung aufgebaut hat.

Answer 5

Wenn Sie jQuery in der Nähe des unteren Teils von BODY laden, aber Probleme mit Code haben, der jQuery(<func>) oder jQuery(document).ready(<func>) ausgibt, lesen Sie jqShim auf Github.

Anstatt eine eigene Document-Ready-Funktion neu zu erstellen, werden die Funktionen einfach beibehalten, bis jQuery verfügbar ist, und dann wie erwartet mit jQuery fortgesetzt. Der Sinn des Verschiebens von jQuery an den unteren Rand des Bodys ist es, das Laden der Seite zu beschleunigen, und Sie können dies immer noch erreichen, indem Sie jqShim.min.js in den Kopf Ihrer Vorlage einbinden.

Am Ende habe ich diesen Code geschrieben, um alle Skripte in WordPress in die Fußzeile verschoben, und nur dieser Shim-Code befindet sich jetzt direkt in der Kopfzeile.