Was ist das Nicht-JQuery-Äquivalent von $(document).ready() ?
Antworten
Zu viele Anzeigen?
Dies beantwortet weder die Frage noch zeigt es irgendeinen Nicht-JQuery-Code. Siehe @ sospedra's Antwort unten.
Das Schöne an $(document).ready() ist, dass sie vor dem Auslösen der window.onload . Die Ladefunktion wartet, bis alles geladen ist, einschließlich externer Elemente und Bilder. $(document).ready wird jedoch ausgelöst, wenn der DOM-Baum vollständig ist und manipuliert werden kann. Wenn Sie DOM ready erreichen wollen, ohne jQuery, können Sie in dieser Bibliothek zu überprüfen. Jemand extrahierte gerade die ready Teil von jQuery. Seine nett und klein und Sie könnten es nützlich finden:
NVRM
Punkte
8487
In neueren Browsern ist es am einfachsten, die entsprechende GlobalEventHandler , onDOMContentLoaded , onload , onloadeddata (...)
onDOMContentLoaded = (function(){ console.log("DOM ready!") })()
onload = (function(){ console.log("Page fully loaded!") })()
onloadeddata = (function(){ console.log("Data loaded!") })()Das DOMContentLoaded-Ereignis wird ausgelöst, wenn das ursprüngliche HTML-Dokument vollständig geladen und geparst wurde, ohne darauf zu warten, dass Stylesheets, Bilder und Subframes zu Ende geladen werden. Ein ganz anderes Ereignis load sollte nur verwendet werden, um eine vollständig geladene Seite zu erkennen. Es ist ein weit verbreiteter Fehler, load zu verwenden, wo DOMContentLoaded viel besser geeignet wäre, also seien Sie vorsichtig.
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
Die verwendete Funktion ist ein IIFE, das in diesem Fall sehr nützlich ist, da es sich selbst auslöst, wenn es bereit ist:
https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
Es ist natürlich sinnvoller, sie am Ende eines Skripts zu platzieren.
In ES6 können wir sie auch als Pfeilfunktion schreiben:
onload = (() => { console.log("ES6 page fully loaded!") })()Am besten ist es, die DOM-Elemente zu verwenden, wir können warten, bis eine Variable bereit ist, die ein gepfeiltes IIFE auslöst.
Das Verhalten ist dasselbe, nur mit weniger Speicherbedarf.
footer = (() => { console.log("Footer loaded!") })()
<div id="footer">
Brian Campbell
Punkte
304982
In einfachem Vanilla JavaScript, ohne Bibliotheken? Das ist ein Fehler. $ ist einfach ein Bezeichner und undefiniert, wenn Sie ihn nicht definieren.
jQuery definiert $ als sein eigenes "Alles-Objekt" (auch bekannt als jQuery damit Sie es ohne Konflikte mit anderen Bibliotheken verwenden können). Wenn Sie nicht jQuery (oder eine andere Bibliothek, die es definiert) verwenden, dann $ wird nicht definiert.
Oder wollen Sie wissen, was die Entsprechung in einfachem JavaScript ist? In diesem Fall wollen Sie wahrscheinlich window.onload was zwar nicht ganz gleichwertig ist, aber der schnellste und einfachste Weg, um in Vanilla JavaScript annähernd den gleichen Effekt zu erzielen.
joan16v
Punkte
4845
- See previous answers
- Weitere Antworten anzeigen
