Javascript domready?


Answers

Bearbeiten: Als das Jahr 2018 auf uns stößt, denke ich, dass es sicher ist, auf das Ereignis DOMContentLoaded zu hören.

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

Bitte beachten Sie, dass die Veranstaltung nur einmal ausgelöst wird, wenn Ihre Seite geladen wird! Wenn Sie wirklich alte Browser unterstützen müssen, dann schauen Sie sich das superleichte Skript an, das ich unten zusammengestellt habe.

Nur zur historischen Referenz:

jQuery verfügt über eine undokumentierte Eigenschaft namens "isReady", die intern verwendet wird, um festzustellen, ob das DOM ready-Ereignis ausgelöst wurde:

if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}

Ich fing bei 1.5.2 an, ging bis 1.3.2 zurück und das Grundstück ist da. Obwohl undokumentiert, würde ich sagen, dass Sie sich in zukünftigen Versionen von jQuery auf diese Eigenschaft verlassen können. Edit: Und ein Jahr später - v1.7.2, benutzen sie immer noch $.isReady - immer noch undokumentiert, also bitte benutze es auf eigene Gefahr. Vorsicht beim Upgrade.

Edit: v1.9, sie verwenden immer noch $.isReady - immer noch nicht dokumentiert

Edit: v2.0, mit all seinen "großen" Änderungen, verwendet immer noch $.isReady - immer noch nicht dokumentiert

Edit: v3.x verwendet immer noch $.isReady - immer noch nicht dokumentiert

Edit: Wie mehrere Leute darauf hingewiesen haben, beantwortet das Obige die Frage nicht wirklich. Also habe ich gerade ein kleines DOM-Ready-Snippet erstellt, das von Dustin Diaz ' noch kleinerem DOM-Ready-Snippet inspiriert wurde. Dustin hat eine gute Möglichkeit geschaffen, das Dokument readyState mit etwas Ähnlichem zu überprüfen:

if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}

Der Grund dafür ist, dass der Browser drei Ladezustände hat: "loading", "interactive" und "complete" (älteres WebKit wird auch "loaded" verwendet, aber Sie müssen sich darüber keine Gedanken mehr machen) . Sie werden feststellen, dass sowohl "loading" als auch "interaktiv" den Text "in" enthalten. Wenn also der String "in" in document.readyState , wissen wir, dass wir noch nicht bereit sind.

Question

Ich weiß, dass ich verschiedene Frameworks wie Prototyp oder Jquery verwenden kann, um eine Funktion an window.onload anzuhängen, aber das ist nicht das, wonach ich suche.

Ich brauche etwas wie .readyState, damit ich so etwas tun kann:

if(document.isReady){
  var id = document.getElem ...
}

Gibt es einen anderen Weg als das, was die Frameworks tun?




Dies ist tatsächlich einer der Hauptgründe, warum die meisten Leute Frameworks wie jQuery verwenden, da die Lösung für diesen Browser nicht konsistent ist.




In den 5 Jahren, die seit der Beantwortung dieser Frage vergangen sind, wurde DOMContentLoaded zu einem universell unterstützten Event, und Sie können es einfach nutzen.

document.addEventListener('DOMContentLoaded', function() {
    //.. do stuff ..
}, false);



document.addEventListener("DOMContentLoaded", function(e){
    console.log("dom ready");//output to web browser console
});

kein JQuery benötigt dafür. Es ist nicht erforderlich, den dritten Parameter für ein DOMContentLoaded zu übergeben, da dieses Ereignis kein übergeordnetes Element zum Durchlaufen des Ereignisses hat. Es ist auch nicht nötig, mit allem, was alle anderen sagen, aufzufallen. Dadurch erfahren Sie, wann das DOM vollständig geladen und einsatzbereit ist. Ich lachte, als ich die DOM-Assistent-Bibliothek bemerkte. Diese Bibliothek ist absolut nutzlos.

Das DOMContentLoaded-Ereignis wird ausgelöst, wenn das Dokument vollständig geladen und analysiert wurde, ohne dass auf das Laden von Stylesheets, Bildern und Subframes gewartet werden muss

addEventListener() ist eine großartige Funktion zum Überprüfen von Ereignissen einschließlich DOM-Status. Bei Verwendung von "DOMContentLoaded" wird der dritte Parameter in addEventListener() nicht benötigt, da dieser Trigger kein übergeordnetes Element hat, um das Ereignis ebenfalls zu übergeben. In meinem obigen Beispiel werden Sie bemerken, dass der zweite Parameter eine anonyme Funktion ist. Sie können den Namen einer Funktion auch in den 2. Parameter übernehmen.

document.addEventListener([(string)event trigger], [function],[(boolean)traverse DOM tree]);

Ein weiterer Vorteil gegenüber JQuery besteht darin, dass dies bei der Aktualisierung von JQuery nicht unterbrochen wird.




Wenn Sie kleinere libs wollen, die nur bestimmte Dinge tun , könnten Sie libs in microjs verwenden . Für die Fragestellung kann die Methode DOMStatic libs ready verwendet werden.