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

Question

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

Answer 1

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

Das onload Ereignis ist ein Standardereignis im DOM, während das ready Ereignis spezifisch für jQuery ist. Der Zweck des ready Ereignisses ist, dass es so früh wie möglich nach dem Laden des Dokuments auftritt, sodass der Code, der der Seite Funktionalität hinzufügt, nicht auf das Laden aller Inhalte warten muss.

Answer 2

window.onload ist das integrierte JavaScript-Ereignis, aber da seine Implementierung subtile Eigenarten in verschiedenen Browsern (Firefox, Internet Explorer 6, Internet Explorer 8 und Opera) hatte, stellt jQuery document.ready bereit, das diese abstrahiert und sofort auslöst, sobald der DOM der Seite bereit ist (ohne auf Bilder usw. zu warten).

$(document.ready (beachten Sie, dass es nicht document.ready ist, das nicht definiert ist) ist eine jQuery-Funktion, die die folgenden Ereignisse umschließt und eine Konsistenz bietet:

• document.ondomcontentready / document.ondomcontentloaded - ein neueres Ereignis, das ausgelöst wird, wenn der DOM des Dokuments geladen ist (was einige Zeit vor dem Laden der Bilder usw. sein kann); wiederum etwas anders in Internet Explorer und im Rest der Welt
• und window.onload (das selbst in alten Browsern implementiert ist), das ausgelöst wird, wenn die gesamte Seite geladen ist (Bilder, Styles usw.)

Answer 3

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

Zum Beispiel wird bei Browsern, die das DOMContentLoaded-Ereignis unterstützen (wie viele Nicht-IE-Browser), dieses Ereignis ausgelöst. (Beachten Sie, dass das DOMContentLoaded-Ereignis erst in IE9+ hinzugefügt wurde.)

Für dies können zwei Syntaxen verwendet werden:

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

Oder die verkürzte Version:

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

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

• Es wird nicht auf das Laden von Bildern gewartet.
• Verwendet, um JavaScript auszuführen, wenn der DOM vollständig geladen ist. Hier Veranstaltungsbehandler platzieren.
• Kann mehrmals verwendet werden.
• Ersetzen Sie $ durch jQuery, wenn Sie die Meldung "$ ist nicht definiert" erhalten.
• Nicht verwenden, wenn Sie Bilder manipulieren möchten. Verwenden Sie stattdessen $(window).load().

window.onload() ist eine native JavaScript-Funktion. Das window.onload()-Ereignis wird ausgelöst, wenn alle Inhalte auf Ihrer Seite geladen sind, einschließlich des DOM (Document Object Model), Banneranzeigen und Bilder. Ein weiterer Unterschied zwischen den beiden ist, dass wir mehr als eine $(document).ready()-Funktion haben können, aber nur eine onload-Funktion haben können.

Answer 4

Ein kleiner Tipp:

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

Korrekter Code:

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

window.addEventListener('load', function () {
  alert('Tschüss!')
})

Ungültiger Code:

window.onload = function () {
  alert('Hallo!') // es wird nicht funktionieren!!!
}

window.onload = function () {
  alert('Tschüss!')
}

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

Analog zu addEventListener ist es besser, $(document).ready() anstelle von onload zu verwenden.

Answer 5

Ein Windows load-Ereignis wird ausgelöst, wenn der gesamte Inhalt Ihrer Seite vollständig geladen ist, einschließlich des DOM (document object model)-Inhalts und asynchronem JavaScript, Frames und Bildern. Sie können auch verwenden. Beide sind gleich; window.onload = function(){} und sind unterschiedliche Möglichkeiten, das gleiche Ereignis zu verwenden.

jQuery $document.ready-Funktionsereignis wird etwas früher ausgeführt als window.onload und wird einmal aufgerufen, wenn das DOM (Document object model) auf Ihrer Seite geladen ist. Es wird nicht auf die Bilder, Frames zum vollständigen Laden warten.

Entnommen aus folgendem Artikel: wie sich $document.ready() von window.onload() unterscheidet