Wie ermittelt man die DOM-Bereitschaft ohne Frameworks?

DOM-Bereitschaft ohne Frameworks verstehen

Bei der Entwicklung von Webanwendungen ist es entscheidend zu bestimmen, wann das Document Object Model (DOM) zur Manipulation bereit ist. Während Frameworks wie jQuery readyState-Listener bieten, werden in diesem Artikel alternative Ansätze zur Erkennung der DOM-Bereitschaft untersucht.

Direkter Zugriff auf den DOM-Status

Anstatt sich auf Frameworks zu verlassen, können Sie dies direkt tun Überprüfen Sie die Eigenschaft „readyState“ des Dokuments:

<code class="js">if (document.readyState === 'complete') {
  // DOM is ready
}</code>

Dieser Ansatz ist jedoch in allen Browsern unzuverlässig, da einige möglicherweise keinen genauen readyState-Wert liefern.

Ereignisbasierte DOM-Bereitschaftsprüfung

Ein browserübergreifender Ansatz besteht darin, auf das DOMContentLoaded-Ereignis zu warten, das ausgelöst wird, wenn das DOM zur Manipulation bereit ist:

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

Nutzung der undokumentierten isReady-Eigenschaft von jQuery

Obwohl undokumentiert, stellt jQuery eine isReady-Eigenschaft bereit, die intern den DOM-Bereitschaftsstatus angibt:

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

Lightweight DOM Ready Snippet

Inspiriert durch den Snippet von Dustin Diaz können Sie wie folgt einen Mini-DOM-Ready-Listener erstellen:

<code class="js">if (!/in/.test(document.readyState)) {
  // Document is ready
} else {
  // Document is not ready
}</code>

Diese Prüfung nutzt die Tatsache, dass der readyState-Wert in früheren Ladezuständen „in“ enthält, was ihn zu einem zuverlässigen Indikator dafür macht DOM-Bereitschaft.

Das obige ist der detaillierte Inhalt vonWie ermittelt man die DOM-Bereitschaft ohne Frameworks?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!