Wie erkennt man ein DOM-Ready-Ereignis in Javascript ohne Frameworks?

Javascript DOM Ready Event Detection ohne Frameworks

In Javascript verlassen sich Entwickler oft auf Frameworks wie Prototype oder jQuery, um Funktionen an das window.onload-Ereignis anzuhängen, um bestimmte Aufgaben auszuführen . Es gibt jedoch auch andere Möglichkeiten, dies zu erreichen, ohne diese Frameworks zu verwenden.

Das Dokumentobjekt in Javascript verfügt über eine readyState-Eigenschaft, die den Ladezustand der Seite angibt, ähnlich der readyState-Eigenschaft von AJAX-Anfragen. Die Eigenschaft „readyState“ kann die folgenden Werte haben:

• Laden – Die Seite wird noch geladen und DOM-Elemente sind noch nicht verfügbar.
• interaktiv – Die Seite wird geladen und die meisten DOM-Elemente sind verfügbar Bereit für die Interaktion, Bilder und andere Ressourcen werden jedoch möglicherweise noch geladen.
• Abgeschlossen – Die Seite ist vollständig geladen und alle DOM-Elemente sind verfügbar.

Um zu erkennen, wann das DOM bereit ist , können Sie den folgenden Code verwenden:

<code class="javascript">function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
    fireOnReady();
} else {
    document.addEventListener("DOMContentLoaded", fireOnReady);
}</code>

Dieser Code prüft, ob die Seite bereits vollständig geladen ist (readyState ist „complete“) und führt die fireOnReady-Funktion sofort aus. Andernfalls fügt es einen Rückruf an das DOMContentLoaded-Ereignis an, das ausgelöst wird, wenn das DOM bereit ist, und führt die Funktion „fireOnReady“ aus.

Eine andere Option ist die Verwendung der undokumentierten isReady-Eigenschaft von jQuery:

<code class="javascript">if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}</code>

Diese Eigenschaft ist jedoch nicht dokumentiert und wird möglicherweise in zukünftigen Versionen von jQuery entfernt.

Letztendlich ist das Abhören des DOMContentLoaded-Ereignisses die zuverlässigste Methode, um in modernen Browsern zu erkennen, wann das DOM bereit ist.

Das obige ist der detaillierte Inhalt vonWie erkennt man ein DOM-Ready-Ereignis in Javascript ohne Frameworks?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!