jQuery – Was sind die Unterschiede zwischen $ (document) .ready und $ (window) .load?

Was sind die Unterschiede zwischen?

$(document).ready(function(){ //my code here }); 

und

 $(window).load(function(){ //my code here }); 

Und ich möchte sicherstellen, dass:

 $(document).ready(function(){ }) 

und

 $(function(){ }); 

und

 jQuery(document).ready(function(){ }); 

sind gleich.

Kannst du mir sagen, welche Unterschiede und Gemeinsamkeiten zwischen ihnen bestehen?

 $(document).ready(function() { // executes when HTML-Document is loaded and DOM is ready console.log("document is ready"); }); $(window).load(function() { // executes when complete page is fully loaded, including all frames, objects and images console.log("window is loaded"); }); 
  

document.ready ist ein jQuery-Event, es wird ausgeführt, wenn das DOM bereit ist, dh alle Elemente sind dort zu finden / zu verwenden, aber nicht notwendigerweise der gesamte Inhalt.
window.onload wird später (oder gleichzeitig in den schlimmsten Fällen) window.onload wenn Bilder und ähnliches geladen werden. Wenn Sie also beispielsweise Bilddimensionen verwenden, möchten Sie dies häufig verwenden.

Lesen Sie auch eine verwandte Frage:
Unterschied zwischen den functionen $ (window) .load () und $ (document) .ready ()

Aus dem jQuery-API-Dokument

Während JavaScript das load Ereignis zum Ausführen von Code beim Rendern einer Seite bereitstellt, wird dieses Ereignis erst dann ausgetriggers, wenn alle Assets wie Bilder vollständig empfangen wurden. In den meisten Fällen kann das Skript ausgeführt werden, sobald die DOM-Hierarchie vollständig erstellt wurde. Der Handler, der an .ready() wird garantiert ausgeführt, nachdem das DOM bereit ist. .ready() ist dies normalerweise der beste Ort, um alle anderen Event-Handler anzuhängen und anderen jQuery-Code auszuführen. Wenn Sie Skripts verwenden, die auf dem Wert von CSS-Stileigenschaften basieren, ist es wichtig, auf externe Stylesheets zu verweisen oder Stilelemente einzubetten, bevor Sie auf die Skripts verweisen.

In Fällen, in denen Code auf geladenen Elementen beruht (wenn beispielsweise die Abmessungen eines Abbilds erforderlich sind), sollte der Code stattdessen in einem Handler für das load -Ereignis platziert werden.


Antwort auf die zweite Frage –

Nein, sie sind identisch, solange Sie jQuery nicht im Konfliktmodus verwenden.

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

Das Ereignis onload ist ein Standardereignis im DOM, während das Ereignis ready für jQuery spezifisch ist. Der Zweck des ready-Ereignisses besteht darin, dass es so früh wie möglich nach dem Laden des Dokuments ausgeführt wird, sodass der Code, der den Elementen auf der Seite functionalität hinzufügt, nicht warten muss, bis alle Inhalte geladen sind.

Diese drei functionen sind gleich.

 $(document).ready(function(){ }) 

und

 $(function(){ }); 

und

 jQuery(document).ready(function(){ }); 

Hier wird $ zum Definieren von jQuery wie $ = jQuery .

Jetzt ist der Unterschied das

$(document).ready ist ein jQuery-Ereignis, das beim Laden von DOM ausgetriggers wird. Es wird also ausgetriggers, wenn die Dokumentstruktur bereit ist.

$(window).load Ereignis wird ausgetriggers, nachdem der gesamte Inhalt geladen wurde, wie die Seite Bilder, CSS etc. enthält.

Der Unterschied zwischen den functionen $(document).ready() und $(window).load() besteht darin, dass der in $(window).load() enthaltene Code einmal die gesamte Seite (Bilder, Iframes, Stylesheets usw.) ausführt. geladen werden, während das Ereignis document ready ausgetriggers wird, bevor alle Bilder, Iframes usw. geladen sind, aber nachdem das gesamte DOM selbst bereit ist.


 $(document).ready(function(){ }) 

und

 $(function(){ }); 

und

 jQuery(document).ready(function(){ }); 

Es gibt keinen Unterschied zwischen den obigen 3 Codes.

Sie sind äquivalent, aber Sie können Konflikte haben, wenn andere JavaScript-Frameworks das gleiche Dollarsymbol $ wie einen Verknüpfungsnamen verwenden.

 jQuery.noConflict(); jQuery.ready(function($){ //Code using $ as alias to jQuery }); 

Ich denke, Sie sollten diesen Artikel betrachten: 6 verschiedene Arten von $ (Dokument) .ready () Beispiele

Das ready-Ereignis wird immer ausgeführt, wenn die einzige html-Seite in den Browser geladen wird und die functionen ausgeführt werden …. Aber das load-Ereignis wird ausgeführt, sobald alle Seiteninhalte für die Seite in den Browser geladen wurden … .. wir können $ oder jQuery verwenden, wenn wir die noconflict () Methode in jquery Skripten verwenden …

 $(document).ready(function(e) { // executes when HTML-Document is loaded and DOM is ready console.log("page is loading now"); }); $(document).load(function(e) { //when html page complete loaded console.log("completely loaded"); }); 

$ (window) .load ist ein Ereignis, das ausgetriggers wird, wenn das DOM und der gesamte Inhalt (alles) auf der Seite wie CSS, Bilder und Frames vollständig geladen sind. Ein gutes Beispiel ist, wenn wir die tatsächliche Bildgröße erhalten oder die Details von allem, was wir verwenden, erhalten möchten.

$ (document) .ready () gibt an, dass der Code darin ausgeführt werden muss, sobald das DOM geladen wurde und bereit ist, vom Skript manipuliert zu werden. Es wird nicht darauf warten, dass die Bilder zum Ausführen des jQuery-Skripts geladen werden.

  

$ (window) .load ausgetriggers nach dem $ (document) .ready ().

 $(document).ready(function(){ }) //and $(function(){ }); //and jQuery(document).ready(function(){ }); 

Oberhalb von 3 ist das gleiche, $ ist der Aliasname von jQuery. Wenn andere JavaScript-Frameworks das gleiche Dollarsymbol $ verwenden, können Konflikte auftreten. Wenn Sie Konflikt konfrontiert jQuery-Team bieten eine Lösung No-Konflikt lesen Sie mehr.

$ (window) .load wurde in 1.8 veraltet und in jquery 3.0 entfernt