Wie erreicht man die $(document).ready()-Funktionalität mit Vanilla-JavaScript?

Nicht-jQuery-Alternative zu $(document).ready()

Die branchenübliche jQuery-Bibliothek stellt $(document) bereit. ready()-Methode, die es Entwicklern ermöglicht, Code auszuführen, nachdem das Document Object Model (DOM) vollständig geladen wurde, um sicherzustellen, dass auf alle Elemente zugegriffen werden kann und der Seiteninhalt zur Bearbeitung bereit ist. Welche Alternativen gibt es jedoch zu dieser Methode bei der Arbeit mit Vanilla-JavaScript?

Antwort:

Das Nicht-jQuery-Äquivalent von $(document).ready() ist wird durch Ereignis-Listener erreicht. Das folgende Code-Snippet zeigt, wie diese Funktionalität erreicht wird:

<code class="javascript">document.addEventListener("DOMContentLoaded", function() {
    // code to be executed when the DOM is fully loaded
});</code>

Diese Implementierung erzielt das gleiche Ergebnis wie $(document).ready(), sodass Entwickler Code erst ausführen können, nachdem das DOM abgeschlossen ist.

Zusätzliche Überlegungen:

Obwohl document.addEventListener("DOMContentLoaded") eine Lösung für das Warten auf die DOM-Bereitschaft bietet, unterscheidet es sich von window.onload hinsichtlich seines Verhaltens. $(document).ready() wartet nur auf die Fertigstellung des DOM, während window.onload sowohl auf das DOM als auch auf alle externen Assets, einschließlich Bilder und Skripte, wartet.

Alternative für ältere Browser ( IE8 und niedriger):

Für ältere Browser wie Internet Explorer 8 und niedriger kann die folgende Alternative verwendet werden:

<code class="javascript">document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // code to be executed when the DOM is fully loaded
    }
};</code>

Beachten Sie, dass es darüber hinaus alternative Zustände gibt „interaktiv.“ Weitere Informationen finden Sie in der Dokumentation des Mozilla Developer Network (MDN).

Das obige ist der detaillierte Inhalt vonWie erreicht man die $(document).ready()-Funktionalität mit Vanilla-JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!