JavaScript DOM bereit

1. Verwenden Sie die Funktion jQuery ready(), um Funktionen aufzurufen, wenn DOM bereit ist
2. Vanilla JavaScript-Ansatz zum Aufrufen von Funktionen, wenn DOM bereit ist

Das Laden einer Website beginnt mit dem Herunterladen des HTML-Dokuments. Sobald das HTML-Dokument heruntergeladen wurde, wird das HTML analysiert und die erforderlichen Assets werden heruntergeladen. Nachdem der HTML-Code analysiert wurde, werden DOM und CSS parallel gerendert. Danach kümmert sich der Browser um die JavaScript-Funktionen onload. Dies ist der Zeitrahmen, in dem Funktionen aufgerufen werden sollen, da HTML, CSS und DOM korrekt gerendert werden. In diesem Tutorial erfahren Sie, wie Sie eine Funktion aufrufen, wenn das DOM bereit ist.

Verwenden Sie die Funktion jQuery ready(), um Funktionen aufzurufen, wenn DOM bereit ist

Die Funktion ready() in jQuery führt den Code aus, wenn das DOM bereit ist. Es wartet darauf, dass alle Elemente vollständig geladen sind, und versucht dann, auf sie zuzugreifen und sie zu bearbeiten. Wir können das Element document auswählen, ein leeres Element, um eine Funktion aufzurufen, oder sogar direkt eine Funktion aufrufen.

$(document).ready(function() {
  // callback function / handler
});

Es ist eine vollständig browserübergreifende Methode und kann von überall im HTML-Code aufgerufen werden.

Vanilla JavaScript-Ansatz zum Aufrufen von Funktionen, wenn DOM bereit ist

Mit dem Ereignis DOMContentLoaded können wir das JavaScript-Äquivalent der Funktion ready() von jQuery erstellen. Wir können einen Ereignis-Listener für DOMContentLoaded hinzufügen und mit diesem Ereignis-Listener unsere gewünschte Funktion aufrufen. Es gibt jedoch einen Haken: Der Rückruf wird nicht ausgelöst, wenn das Ereignis bereits eingetreten ist. Wir kümmern uns also um diesen Zustand, indem wir den Bereitschaftszustand des Dokumentobjekts überprüfen.

const callback = function() {};

if (document.readyState === 'complete' ||
    document.readyState === 'interactive') {
  setTimeout(callback, 1);
} else {
  document.addEventListener('DOMContentLoaded', callback);
}

Außer diesen Methoden gibt es nur wenige Tricks, die uns bei der Lösung dieses Problems helfen, die jedoch möglicherweise nicht in allen Fällen ideal sind.

• Verwenden Sie das Attribut onload des Fensters, um die JavaScript-Funktion aufzurufen.
• Verwenden Sie das Attribut onload des Körpers, um die JavaScript-Funktion aufzurufen. Diese Methode kann sehr langsam sein, da sie darauf wartet, dass jedes einzelne Element geladen wird.
• Wir können die auszuführende Funktion vom Ende des Körpers aus aufrufen. Am Ende des Körpers wird DOM entsprechend gerendert und bereit. Es gibt also keine Probleme mit Funktionsaufrufen, die sich auf ein Element beziehen. Es funktioniert viel schneller als der Body-Onload-Handler, da es nicht darauf wartet, dass die Bilder vollständig geladen werden.