Frage window.onload vs $ (Dokument) .ready ()


Was sind die Unterschiede zwischen JavaScript? window.onload und jQuery's $(document).ready() Methode?


1086
2017-09-13 06:24


Ursprung


Antworten:


Das ready Ereignis tritt auf, nachdem das HTML-Dokument geladen wurde, während der onload Ereignis tritt später auf, wenn alle Inhalte (z. B. Bilder) ebenfalls geladen wurden.

Das onload Ereignis ist ein Standard - Ereignis im DOM, während die ready Das Ereignis ist spezifisch für jQuery. Der Zweck der ready Dieses Ereignis sollte so früh wie möglich nach dem Laden des Dokuments auftreten, damit der Code, der den Elementen auf der Seite Funktionalität hinzufügt, nicht auf den gesamten Inhalt warten muss.


1110
2017-09-13 06:28



window.onload ist das integrierte JavaScript-Ereignis, aber wie es die Implementierung hatte subtil Macken in den Browsern (Firefox, Internet Explorer 6, Internet Explorer 8 und Oper), bietet jQuery document.ready, die diese weg abstrahiert und feuert, sobald das DOM der Seite bereit ist (nicht auf Bilder usw. warten).

$(document).ready (Beachten Sie, dass es ist nicht  document.ready, was undefiniert ist) ist eine jQuery-Funktion, Wrapping und Bereitstellung Konsistenz zu folgenden Ereignissen:

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

123
2017-09-13 06:30



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

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

Dazu können zwei Syntaxen verwendet werden:

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

Oder die Kurzversion:

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

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

  • Es wird nicht darauf warten, dass die Bilder geladen werden.
  • Wird zum Ausführen von JavaScript verwendet, wenn das DOM vollständig geladen ist. Setzen Sie Ereignishandler hier.
  • Kann mehrmals verwendet werden.
  • Ersetzen $ mit jQuery wenn Sie "$ ist nicht definiert" erhalten
  • Wird nicht verwendet, wenn Sie Bilder manipulieren möchten. Benutzen $(window).load() stattdessen.

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


78
2017-08-20 16:00



EIN Windows lädt Ereignis wird ausgelöst, wenn der gesamte Inhalt auf Ihrer Seite vollständig geladen ist, einschließlich des Inhalts des DOM (Dokumentobjektmodells) und asynchrones JavaScript, Rahmen und 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.

jQuery $document.ready Funktionsereignis wird etwas früher als ausgeführt window.onload und wird aufgerufen, sobald das DOM (Document object model) auf Ihrer Seite geladen ist. Es wird nicht auf die warten Bilder, Frames, um vollständig geladen zu werden.

Aus dem folgenden Artikel: Wie $document.ready() unterscheidet sich von window.onload()


38
2017-09-17 07:09



Ein Wort der Vorsicht bei der Verwendung $(document).ready() mit Internet Explorer. Wenn eine HTTP-Anfrage unterbrochen wird Vor das gesamte Dokument wird geladen (z. B. während eine Seite in den Browser streamt, wird ein anderer Link angeklickt) IE löst das aus $(document).ready Veranstaltung.

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

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


21
2017-08-27 18:56



$(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>


18
2018-02-26 12:30



Veranstaltungen

$(document).on('ready', handler) bindet sich an das bereit Ereignis von jQuery. Der Handler wird aufgerufen wenn das DOM geladen ist. Assets wie vielleicht fehlen noch Bilder. Es wird niemals aufgerufen, wenn das Dokument zum Zeitpunkt der Bindung fertig ist. jQuery verwendet die DOMContentLoaded-Event dafür emulieren, wenn nicht verfügbar.

$(document).on('load', handler) ist ein Ereignis, das einmal ausgelöst wird Ressourcen werden geladen vom Server. Bilder werden jetzt geladen. Während aufladen ist ein rohes HTML-Ereignis, bereit wird von jQuery erstellt.

Funktionen

$(document).ready(handler) eigentlich ist a versprechen. Der Handler wird sofort aufgerufen, wenn das Dokument zum Zeitpunkt des Aufrufs bereit ist. Sonst bindet es an die ready-Veranstaltung.

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

Weiterführende Literatur


15
2018-06-02 10:38