it-swarm.com.de

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.

Können Sie mir sagen, welche Unterschiede und Gemeinsamkeiten zwischen ihnen bestehen?

288
hungneox

$(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");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Query 3.0 Version

Umbruchänderung: .load (), .unload () und .error () entfernt

Diese Methoden sind Verknüpfungen für Ereignisoperationen, hatten jedoch mehrere APIs Einschränkungen. Die Ereignismethode .load() stand im Konflikt mit der ajax .load()____. Methode. Die .error()-Methode konnte nicht mit window.onerror.__ verwendet werden. aufgrund der Art, wie die DOM-Methode definiert wird. Wenn Sie anhängen müssen Ereignisse mit diesen Namen verwenden Sie die .on()-Methode, z. Veränderung $("img").load(fn) an $(img).on("load", fn).1

$(window).load(function() {});

Sollte in geändert werden 

$(window).on('load', function (e) {})

Diese sind alle gleichwertig:

$(function(){
}); 

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

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

$(document).on('ready', function(){
})
399
Oyeme

document.ready ist ein jQuery-Ereignis, das ausgeführt wird, wenn das DOM bereit ist, z. Alle Elemente sind dort zu finden/zu verwenden, aber nicht notwendigerweise der gesamte Inhalt. 
window.onload wird später ausgelöst (oder im schlimmsten Fall gleichzeitig), wenn Bilder und dergleichen geladen werden. Wenn Sie beispielsweise Bildmaße verwenden, möchten Sie dies häufig stattdessen verwenden.

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

28
bighearted

Aus dem jQuery API-Dokument

Während JavaScript das Ereignis load für die Ausführung von Code bereitstellt, wenn ein Seite wird gerendert, dieses Ereignis wird erst ausgelöst, wenn alle Assets wie Bilder wurden vollständig empfangen. In den meisten Fällen ist der Das Skript kann ausgeführt werden, sobald die DOM-Hierarchie vollständig ist gebaut. Der an .ready() übergebene Handler ist garantiert Wird ausgeführt, nachdem das DOM fertig ist, daher ist dies normalerweise der beste Ort für Fügen Sie alle anderen Ereignishandler hinzu, und führen Sie den anderen jQuery-Code aus. Beim Benutzen Skripts, die auf den Wert der CSS-Stileigenschaften angewiesen sind, ist es wichtig um auf externe Stylesheets zu verweisen oder Stilelemente vor .__ einzubetten. Referenzieren der Skripte.

In Fällen, in denen Code von geladenen Assets abhängt (z. B. wenn die -Dimensionen eines Bildes erforderlich sind), sollte der Code in ein .__ eingefügt werden. Handler stattdessen für das Ereignis load.


Antwort auf die zweite Frage -

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

11
Rifat

Diese drei Funktionen sind gleich.

$(document).ready(function(){

}) 

und

$(function(){

}); 

und

jQuery(document).ready(function(){

});

hier wird $ für definierte jQuery wie $ = jQuery verwendet. 

Jetzt ist das der Unterschied

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

$(window).load Ereignis wird ausgelöst, nachdem der gesamte Inhalt geladen wurde, z. B. Seite mit Bildern, CSS usw.

9

Das ready-Ereignis tritt auf, nachdem das HTML-Dokument geladen wurde, während das Onload-Ereignis später auftritt, wenn der gesamte Inhalt (z. B. Bilder) ebenfalls geladen wurde.

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

9
Deep

Der Unterschied zwischen $(document).ready() und $(window).load() Funktionen besteht darin, dass der in $(window).load() enthaltene Code ausgeführt wird, sobald die gesamte Seite (Bilder, iframes, Stylesheets usw.) geladen ist, während das document ready event ausgelöst wird, bevor alle Bilder, iframes usw. geladen werden , aber nachdem der ganze DOM selbst fertig ist.


$(document).ready(function(){

}) 

und

$(function(){

});

und

jQuery(document).ready(function(){

});

Es gibt keinen Unterschied zwischen den obigen 3 Codes.

Sie sind gleichwertig, es kann jedoch zu Konflikten kommen, wenn andere JavaScript-Frameworks dasselbe Dollarsymbol $ als Abkürzungsnamen verwenden.

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

Das ready -Ereignis wird immer ausgeführt, wenn nur die HTML-Seite in den Browser geladen wird und die Funktionen ausgeführt werden ..... Das Ladeereignis wird jedoch ausgeführt, wenn der gesamte Seiteninhalt für die Seite in den Browser geladen ist ........ Wir können $ oder jQuery verwenden, wenn wir die Methode noconflict () in Jquery-Skripten verwenden ...

3
Kumar Immanuel
$(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"); 
});
2
Pavan Hukerikar

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

$ (document) .ready () gibt an, dass der darin enthaltene Code ausgeführt werden muss, sobald das DOM geladen wurde und bereit ist, von einem Skript bearbeitet zu werden. Es wird nicht warten, bis die Bilder geladen werden, um das jQuery-Skript auszuführen.

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$ (window) .load wird nach dem $ (document) .ready () ausgelöst.

$(document).ready(function(){

}) 
//and 
$(function(){

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

});

Über 3 sind die gleichen, $ ist der Aliasname von jQuery. Es kann zu Konflikten kommen, wenn andere JavaScript Frameworks dasselbe Dollarsymbol $ verwenden. Wenn Sie mit Konflikten konfrontiert sind, bietet das jQuery-Team eine Lösung Kein Konflikt Lesen Sie mehr.

$ (window) .load wurde in 1.8 nicht mehr unterstützt und in jquery 3.0 entfernt. 

0
Srikrushna Pal