1245

Was sind die Unterschiede zwischen der JavaScript- window.onloadund der jQuery- $(document).ready()Methode?

javascript jquery dom-events unobtrusive-javascript Vaibhav Jain
quelle

2

mögliches Duplikat von $ (Dokument). bereits gleichwertig ohne jQuery

Kzqai

Die meisten Antworten hier sind veraltet. Die Art und Weise, wie jQuery derzeit implementiert, $().ready()lässt es window.onloadmanchmal feuern .

Shikkediel

1243

Das readyEreignis tritt auf, nachdem das HTML-Dokument geladen wurde, während das onloadEreignis später auftritt, wenn auch der gesamte Inhalt (z. B. Bilder) geladen wurde.

Das onloadEreignis ist ein Standardereignis im DOM, während das readyEreignis für jQuery spezifisch ist. Der Zweck des readyEreignisses besteht darin, dass es so früh wie möglich nach dem Laden des Dokuments auftritt, damit der Code, der den Elementen auf der Seite Funktionen hinzufügt, nicht auf das Laden des gesamten Inhalts warten muss.

Guffa
quelle

153

@baptx: Du liegst falsch. Das readyEreignis ist spezifisch für jQuery. Das DOMContentLoadedEreignis wird verwendet, wenn es im Browser verfügbar ist, andernfalls wird es emuliert. Es gibt keine genaue Entsprechung im DOM, da das DOMContentLoadedEreignis nicht in allen Browsern unterstützt wird.

Guffa

18

Ok, aber das gleiche Ergebnis gibt es mit DOMContentLoaded. Vielleicht hätten Sie dies angeben sollen

Taufe

55

@baptx: Ich dachte nicht, dass es für die Frage relevant ist, und ich weiß es immer noch nicht.

Guffa

17

Warum das Downvote? Wenn Sie nicht erklären, was Sie für falsch halten, kann dies die Antwort nicht verbessern.

Guffa

4

Es gibt kein Ereignis wie onload. onloadist der Name einer Objekteigenschaft, in der eine Funktion gespeichert ist, die beim loadAuslösen des Ereignisses aufgerufen werden soll.

Scott Marcus

140

window.onloadist das integrierte JavaScript-Ereignis, aber da die Implementierung in allen Browsern (Firefox, Internet Explorer 6, Internet Explorer 8 und Opera ) subtile Macken aufwies, bietet jQuery diese , die diese abstrahieren, und wird ausgelöst, sobald das DOM der Seite fertig ist (wartet nicht auf Bilder usw.).document.ready

$(document).ready(Beachten Sie, dass dies nicht document.ready der Fall ist. Dies ist eine jQuery-Funktion, die die folgenden Ereignisse umschließt und für Konsistenz sorgt:

document.ondomcontentready/ document.ondomcontentloaded- ein neues Ereignis, das ausgelöst wird, wenn das DOM des Dokuments geladen wird (dies kann einige Zeit dauern , bevor die Bilder usw. geladen werden); wieder etwas anders im Internet Explorer und im Rest der Welt
und window.onload(die auch in alten Browsern implementiert ist), die ausgelöst wird, wenn die gesamte Seite geladen wird (Bilder, Stile usw.)

Piskvor verließ das Gebäude
quelle

16

Hier gibt es ein kleines Missverständnis: Das loadEreignis von windowwird in allen Browsern einigermaßen konsistent implementiert. Das Problem, das jQuery und andere Bibliotheken zu lösen versuchen, ist das von Ihnen erwähnte. Das loadEreignis wird erst ausgelöst, wenn alle abhängigen Ressourcen wie Bilder und Stylesheets geladen wurden. Dies kann lange dauern, bis das DOM vollständig geladen ist. gerendert und bereit für die Interaktion. Das Ereignis, das in den meisten Browsern ausgelöst wird, wenn das DOM bereit ist DOMContentLoaded, wird aufgerufen , nicht DOMContentReady.

Tim Down

2

@ Tim Down: vernünftigerweise ist das Schlüsselwort hier; Zumindest ein onloadbisschen Objektschnüffeln war früher notwendig, auch bei (es gibt Unterschiede zu FF / IE / Opera). Was das DOMContentLoadedbetrifft, sind Sie völlig richtig. Bearbeitung zur Verdeutlichung.

Piskvor verließ das Gebäude

Was für ein Objekt schnüffeln meinst du?

Tim Down

1

@ Tim Down: Ich weiß , dass Opera hatte , aber der Ereignisauslöser auf , es war etwas schrullig (bis Auslöser zuverlässig, document.onloadwar nutzbar). Was die window.onload angeht: window.onload = fn1;window.onload=fn2;- Nur fn2 wird beim Laden aufgerufen. Einige kostenlose Webhosts fügen ihren eigenen Code in Dokumente ein, und manchmal hat dies den In-Page-Code überlastet.

Piskvor verließ das Gebäude

1

Ist das Schreiben von "document.ready" nicht falsch? Das Dokumentobjekt verfügt nicht über eine Ready-Methode. Das jQuery-Objekt wird vom Aufruf $ (document) zurückgegeben. Bitte bearbeiten Sie diese Antwort, wenn ich Recht habe, da dies sehr verwirrend ist.

A. Sallai

87

$(document).ready()ist ein jQuery-Ereignis. Die $(document).ready()Methode von JQuery wird aufgerufen, sobald das DOM bereit ist (was bedeutet, dass der Browser den HTML-Code analysiert und den DOM-Baum erstellt hat). Auf diese Weise können Sie Code ausführen, sobald das Dokument zur Bearbeitung bereit ist.

Wenn ein Browser beispielsweise das Ereignis DOMContentLoaded unterstützt (wie es viele Nicht-IE-Browser tun), wird es bei diesem Ereignis ausgelöst. (Beachten Sie, dass das DOMContentLoaded-Ereignis nur in IE9 + zum IE hinzugefügt wurde.)

Hierfür können zwei Syntaxen verwendet werden:

$( document ).ready(function() {
   console.log( "ready!" );
});

Oder die Kurzfassung:

$(function() {
   console.log( "ready!" );
});

Hauptpunkte für $(document).ready():

Es wird nicht darauf warten, dass die Bilder geladen werden.
Wird verwendet, um JavaScript auszuführen, wenn das DOM vollständig geladen ist. Stellen Sie hier Event-Handler ein.
Kann mehrfach verwendet werden.
Ersetzen Sie $durch, jQuerywenn Sie "$ ist nicht definiert" erhalten.
Wird nicht verwendet, wenn Sie Bilder bearbeiten möchten. Verwenden Sie $(window).load()stattdessen.

window.onload()ist eine native JavaScript-Funktion. Das window.onload()Ereignis wird ausgelöst, wenn der gesamte Inhalt Ihrer Seite geladen wurde, einschließlich DOM (Dokumentobjektmodell), Bannerwerbung und Bilder. Ein weiterer Unterschied zwischen beiden besteht darin, dass wir zwar mehr als eine $(document).ready()Funktion haben können, aber nur eine onloadFunktion.

James Drinkard
quelle

4

Kleiner Punkt: Die Diskussion über IE ist schlecht formuliert. Es ist nicht so, dass der IE (8 und früher) "nicht sicher ausgelöst werden kann", bis der readyState des Dokuments vollständig ist. Es ist so, dass dem IE ein DOMContentLoaded-Ereignis fehlte . Keine Frage der "Sicherheit", sondern eine fehlende Funktion im IE, hinzugefügt in IE 9.

ToolmakerSteve

Sie haben Recht, also habe ich die Antwort bearbeitet, um Ihren Kommentar und Ihren Dank wiederzugeben!

James Drinkard

Sie sagen: "Es wird nicht darauf warten, dass die Bilder geladen werden." Was ist mit anderen Dateien, js am wichtigsten? Oft muss ich vor dem Aufruf der Funktion aus einer anderen Datei wissen, ob sie geladen ist.

Darius.V

Dies ist insgesamt ein anderes Thema, aber wenn ich verstehe, was Sie fragen, hängt es davon ab, wie Sie Ihre Seite strukturieren, einschließlich der Reihenfolge, in der Sie die js-Dateien platzieren. Hier ist ein Link, der detaillierter geht: ablogaboutcode.com/2011/06/14/… HTH, James

James Drinkard

Warum möchte jemand $ (document) .ready () mehrmals verwenden?

Usman

43

Ein Windows-Ladeereignis wird ausgelöst, wenn der gesamte Inhalt Ihrer Seite vollständig geladen ist, einschließlich des DOM-Inhalts (Document Object Model) und des asynchronen JavaScript , der Frames und der Bilder . Sie können auch body onload = verwenden. Beide sind gleich; window.onload = function(){}und <body onload="func();">sind verschiedene Möglichkeiten, dasselbe Ereignis zu verwenden.

Das jQuery-$document.ready Funktionsereignis wird etwas früher ausgeführt als window.onloadund wird aufgerufen, sobald das DOM (Document Object Model) auf Ihre Seite geladen wurde. Es wird nicht darauf warten, dass die Bilder und Frames vollständig geladen werden .

Entnommen aus folgendem Artikel: Wie $document.ready()unterscheidet sich vonwindow.onload()

Vivek
quelle

Ich denke das ist die beste Antwort!

Haoyu Chen

3

Ich könnte zustimmen, wenn es nicht Wort für Wort kopiert würde.

Kevin B

23

$(document).ready(function() {

    // Executes when the HTML document is loaded and the DOM is ready
    alert("Document is ready");
});

// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {

     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Erweitern Sie das Snippet

dev4092
quelle

22

Ein Wort zur Vorsicht bei der Verwendung $(document).ready()mit Internet Explorer. Wenn eine HTTP-Anforderung unterbrochen wird, bevor das gesamte Dokument geladen wird (z. B. während eine Seite zum Browser gestreamt wird, wird auf einen anderen Link geklickt), löst der IE das $(document).readyEreignis aus.

Wenn Code innerhalb des $(document).ready()Ereignisses auf DOM-Objekte verweist, besteht die Möglichkeit, dass diese Objekte nicht gefunden werden, und es können Javascript-Fehler auftreten. Schützen Sie entweder Ihre Verweise auf diese Objekte oder verschieben Sie den Code, der diese Objekte auf das Ereignis window.load verweist.

Ich konnte dieses Problem in anderen Browsern (insbesondere Chrome und Firefox) nicht reproduzieren.

Deck
quelle

Welche Version von IE? Ich weiß, ich sollte mich um Kompatibilität kümmern, aber es ist schwer mit IE. Ist es akzeptabel, document.ready nur für JavaScript zu verwenden?

Monica

1

IE6, 7 und 8. Siehe: stackoverflow.com/questions/13185689/…

James Drinkard

22

Ein kleiner Tipp:

Verwenden Sie immer die window.addEventListenerOption, um dem Fenster ein Ereignis hinzuzufügen. Auf diese Weise können Sie den Code in verschiedenen Ereignishandlern ausführen.

Richtiger Code:

window.addEventListener('load', function () {
  alert('Hello!')
})

window.addEventListener('load', function () {
  alert('Bye!')
})

Erweitern Sie das Snippet

Ungültiger Code:

window.onload = function () {
  alert('Hello!') // it will not work!!!
}

window.onload = function () {
  alert('Bye!') 
}

Erweitern Sie das Snippet

Dies liegt daran, dass Onload nur eine Eigenschaft des Objekts ist, die überschrieben wird.

In Analogie zu addEventListenerist es besser, $(document).ready()als Onload zu verwenden.

Илья Зеленько
quelle

3

Dies beantwortet die gestellte Frage nicht.

17

Veranstaltungen

$(document).on('ready', handler)bindet an das Ready-Ereignis von jQuery. Der Handler wird aufgerufen, wenn das DOM geladen wird . Assets wie Bilder fehlen möglicherweise noch . Es wird niemals aufgerufen, wenn das Dokument zum Zeitpunkt der Bindung fertig ist. jQuery verwendet dafür das DOMContentLoaded -Event und emuliert es, wenn es nicht verfügbar ist.

$(document).on('load', handler)ist ein Ereignis, das ausgelöst wird, sobald alle Ressourcen vom Server geladen wurden . Bilder werden jetzt geladen. Während onload ein unformatiertes HTML-Ereignis ist, wird ready von jQuery erstellt.

Funktionen

$(document).ready(handler)eigentlich ist ein versprechen . Der Handler wird sofort aufgerufen, wenn das Dokument zum Zeitpunkt des Aufrufs bereit ist. Andernfalls wird es an das ready-Event gebunden.

Vor jQuery 1.8 , $(document).load(handler)existierte als Alias zu $(document).on('load',handler).

Weiterführende Literatur

Abstraktor
quelle

Können Sie bitte erklären, dass sich $ (document) .load (handler) genauso verhält wie die Bindung an das Ladeereignis? Im Gegensatz zu $ .fn.ready wird es nicht sofort durchrufen?

Nabeel Khan

Ich denke, Sie waren verwirrt darüber, $.fn.loaddass Sie sich nicht mehr als Ereignisordner verhalten. Tatsächlich ist es seit jquery 1.8 veraltet. Ich habe es entsprechend aktualisiert

Abstraktor

16

Das $(document).ready()ist ein jQuery Ereignis , das auftritt , wenn das HTML - Dokument vollständig geladen wurde, während das window.onloadEreignis später eintritt, wenn alles , einschließlich der Bilder auf der Seite geladen.

Außerdem ist window.onload ein reines Javascript-Ereignis im DOM, während das $(document).ready()Ereignis eine Methode in jQuery ist.

$(document).ready() ist normalerweise der Wrapper für jQuery, um sicherzustellen, dass alle geladenen Elemente für die Verwendung in jQuery verwendet werden ...

Schauen Sie sich den jQuery-Quellcode an, um zu verstehen, wie er funktioniert:

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {

        readyList = jQuery.Deferred();

        // Catch cases where $(document).ready() is called after the browser event has already occurred.
        // we once tried to use readyState "interactive" here, but it caused issues like the one
        // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
        if ( document.readyState === "complete" ) {
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready );

        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed, false );

        // If IE event model is used
        } else {
            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", completed );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", completed );

            // If IE and not a frame
            // continually check to see if the document is ready
            var top = false;

            try {
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}

            if ( top && top.doScroll ) {
                (function doScrollCheck() {
                    if ( !jQuery.isReady ) {

                        try {
                            // Use the trick by Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }

                        // detach all dom ready events
                        detach();

                        // and execute any waiting functions
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
    // Add the callback
    jQuery.ready.promise().done( fn );

    return this;
};

Außerdem habe ich das folgende Bild als Kurzreferenz für beide erstellt:

Alireza
quelle

1

schön, die docs zu verweisen ist ein Pluspunkt .. thnx

Irf

13

window.onload: Ein normales JavaScript-Ereignis.

document.ready: Ein bestimmtes jQuery-Ereignis, wenn der gesamte HTML-Code geladen wurde.

Amir Mehdi Delta
quelle

11

Eine Sache, an die Sie sich erinnern sollten (oder sollte ich mich erinnern), ist, dass Sie onloads nicht so stapeln können, wie Sie es können ready. Mit anderen Worten, jQuery Magic erlaubt mehrere readys auf derselben Seite, aber das können Sie nicht onload.

Der letzte onloadüberschreibt alle vorherigen onloads.

Eine gute Möglichkeit, damit umzugehen, ist eine Funktion, die anscheinend von einem Simon Willison geschrieben und unter Verwenden mehrerer JavaScript-Onload-Funktionen beschrieben wurde .

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* More code to run on page load */
});

Donald A Nummer Jr.
quelle

11

Document.ready(ein jQuery-Ereignis) wird ausgelöst, wenn alle Elemente vorhanden sind, und sie können im JavaScript-Code referenziert werden, der Inhalt wird jedoch nicht unbedingt geladen. Document.readyWird ausgeführt, wenn das HTML-Dokument geladen wird.

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

Der window.loadwartet jedoch, bis die Seite vollständig geladen ist. Dies schließt innere Rahmen, Bilder usw. ein.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});

Mike Clark
quelle

5

Das Ereignis document.ready tritt auf, wenn das HTML-Dokument geladen wurde, und das window.onloadEreignis tritt immer später auf, wenn alle Inhalte (Bilder usw.) geladen wurden.

Sie können das document.readyEreignis verwenden, wenn Sie "früh" in den Renderprozess eingreifen möchten, ohne auf das Laden der Bilder warten zu müssen. Wenn Sie die Bilder (oder andere "Inhalte") benötigen, bevor Ihr Skript "etwas tut", müssen Sie warten, bis window.onload.

Wenn Sie beispielsweise ein "Diashow" -Muster implementieren und Berechnungen basierend auf Bildgrößen durchführen müssen, möchten Sie möglicherweise warten, bis window.onload. Andernfalls können zufällige Probleme auftreten, je nachdem, wie schnell die Bilder geladen werden. Ihr Skript wird gleichzeitig mit dem Thread ausgeführt, der Bilder lädt. Wenn Ihr Skript lang genug ist oder der Server schnell genug ist, bemerken Sie möglicherweise kein Problem, wenn Bilder rechtzeitig eintreffen. Am sichersten wäre es jedoch, Bilder laden zu lassen.

document.readyDies könnte ein schönes Ereignis für Sie sein, um Benutzern ein Zeichen für window.onload"Laden ..." anzuzeigen. Anschließend können Sie alle Skripts ausführen, für die Ressourcen geladen werden müssen, und schließlich das Zeichen "Laden ..." entfernen.

Beispiele: -

// document ready events
$(document).ready(function(){
     alert("document is ready..");
})

// using JQuery
$(function(){
   alert("document is ready..");
})

// window on load event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;

Nimesh Khatri
quelle

2

window.onloadist eine in JavaScript integrierte Funktion. window.onloadauslösen, wenn die HTML-Seite geladen wird. window.onloadkann nur einmal geschrieben werden.

document.readyist eine Funktion der jQuery-Bibliothek. document.readyWird ausgelöst, wenn HTML und der gesamte in der HTML-Datei enthaltene JavaScript-Code, CSS und Bilder vollständig geladen sind. document.readykann je nach Bedarf mehrfach geschrieben werden.

Amit
quelle

"window.onload ist eine Funktion" ist falsch, da @ Илья-Зеленько zeigt, dass es sich um eine Eigenschaft und nicht um eine Funktion handelt. Details: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/… während .ready () eine Funktion ist und einen Handler erwartet.

Vik

1

Wenn Sie sagen $(document).ready(f), weisen Sie die Skript-Engine an, Folgendes zu tun:

Holen Sie sich das Objektdokument und verschieben Sie es, da es sich nicht im lokalen Bereich befindet. Es muss eine Hash-Tabellensuche durchführen, um herauszufinden, wo sich das Dokument befindet. Glücklicherweise ist das Dokument global gebunden, sodass es sich um eine einzelne Suche handelt.
Suchen Sie das Objekt $und wählen Sie es aus, da es sich nicht im lokalen Bereich befindet. Es muss eine Hash-Tabellensuche durchführen, bei der möglicherweise Kollisionen auftreten oder nicht.
Suchen Sie das Objekt f im globalen Bereich, bei dem es sich um eine andere Hash-Tabellensuche handelt, oder drücken Sie das Funktionsobjekt und initialisieren Sie es.
Aufruf readydes ausgewählten Objekts, bei dem eine weitere Hash-Tabellensuche im ausgewählten Objekt durchgeführt wird, um die Methode zu finden und aufzurufen.
erledigt.

Im besten Fall handelt es sich hierbei um 2 Hash-Tabellen-Lookups. Dabei wird jedoch die schwere Arbeit von jQuery ignoriert, bei $der alle möglichen Eingaben in jQuery in der Küchenspüle vorgenommen werden. Daher wird wahrscheinlich eine andere Karte die Abfrage an den richtigen Handler senden.

Alternativ können Sie dies tun:

window.onload = function() {...}

welches wird

Finden Sie das Objektfenster im globalen Bereich. Wenn das JavaScript optimiert ist, weiß es, dass das Fenster, da es nicht geändert wurde, bereits das ausgewählte Objekt enthält und daher nichts unternommen werden muss.
Das Funktionsobjekt wird auf den Operandenstapel verschoben.
Überprüfen Sie, ob onloades sich um eine Eigenschaft handelt oder nicht, indem Sie eine Hash-Tabellensuche durchführen, da diese wie eine Funktion aufgerufen wird.

Im besten Fall kostet dies eine einzelne Hash-Tabellensuche, die notwendig ist, weil onloadsie abgerufen werden muss.

Im Idealfall kompiliert jQuery seine Abfragen zu Zeichenfolgen, die eingefügt werden können, um das zu tun, was Sie von jQuery wollten, jedoch ohne die Laufzeitausgabe von jQuery. Auf diese Weise haben Sie die Wahl zwischen beiden

Führen Sie den dynamischen Versand von Anfragen wie heute durch.
Lassen Sie jQuery Ihre Abfrage in eine reine JavaScript-Zeichenfolge kompilieren, die an eval übergeben werden kann, um das zu tun, was Sie möchten.
Kopieren Sie das Ergebnis von 2 direkt in Ihren Code und überspringen Sie die Kosten von eval.

Dmitry
quelle

0

window.onload wird von der DOM-API bereitgestellt und lautet "Das Ladeereignis wird ausgelöst, wenn eine bestimmte Ressource geladen wurde".

"Das Ladeereignis wird am Ende des Dokumentladevorgangs ausgelöst. Zu diesem Zeitpunkt befinden sich alle Objekte im Dokument im DOM, und alle Bilder, Skripte, Links und Unterrahmen wurden vollständig geladen." DOM-Onload

In jQuery wird $ (document) .ready () jedoch erst ausgeführt, wenn die Seite Document Object Model (DOM) für die Ausführung von JavaScript-Code bereit ist. Dies schließt keine Bilder, Skripte, Iframes usw. ein

Die jquery ready-Methode wird also früher als das dom onload-Ereignis ausgeführt.

andyCao
quelle

window.onload vs $ (document) .ready ()

Antworten:

Ein kleiner Tipp:

Veranstaltungen

Funktionen

Weiterführende Literatur