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

Was sind 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 Ähnlichkeiten 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");
});

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

Abfrage 3.0-Version

Breaking Change: .load (), .unload () und .error () entfernt

Diese Methoden sind Verknüpfungen für Ereignisoperationen, hatten jedoch mehrere API-Einschränkungen. Die Ereignismethode .load()widersprach der Ajax- .load() Methode. Die .error()Methode konnte window.onerror aufgrund der Definition der DOM-Methode nicht verwendet werden . Wenn Sie Ereignisse mit diesen Namen anhängen müssen, verwenden Sie die .on()Methode, z . B. Ändern $("img").load(fn)zu $(img).on("load", fn). ¹

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

Sollte geändert werden zu

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

Diese sind alle gleichwertig:

$(function(){
}); 

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

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

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

document.readyIst ein jQuery-Ereignis, wird es ausgeführt, wenn das DOM bereit ist, z. B. müssen alle Elemente gefunden / verwendet werden, aber nicht unbedingt der gesamte Inhalt.
window.onloadWird später ausgelöst (oder gleichzeitig im schlimmsten Fall), wenn Bilder und dergleichen geladen werden. Wenn Sie beispielsweise Bildabmessungen verwenden, möchten Sie diese häufig stattdessen verwenden.

Lesen Sie auch eine verwandte Frage:
Unterschied zwischen den Funktionen $ (Fenster) .load () und $ (Dokument) .ready ()

Aus dem jQuery-API-Dokument

Während JavaScript das loadEreignis zum Ausführen von Code beim Rendern einer Seite bereitstellt , wird dieses Ereignis erst ausgelöst, wenn alle Elemente 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 übergebene Handler .ready()wird garantiert ausgeführt, nachdem das DOM bereit ist. Daher ist dies normalerweise der beste Ort, um alle anderen Ereignishandler anzuhängen und anderen jQuery-Code auszuführen. Wenn Sie Skripte verwenden, die auf dem Wert der CSS-Stileigenschaften basieren, ist es wichtig, auf externe Stylesheets zu verweisen oder Stilelemente einzubetten, bevor Sie auf die Skripte verweisen.

In Fällen, in denen Code auf geladenen Assets basiert (z. B. wenn die Abmessungen eines Bildes erforderlich sind), sollte der Code stattdessen in einem Handler für das loadEreignis abgelegt werden.

Antwort auf die zweite Frage -

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

Diese drei Funktionen sind gleich.

$(document).ready(function(){

}) 

und

$(function(){

}); 

und

jQuery(document).ready(function(){

});

Hier $wird zum Definieren von jQuerylike $= verwendet jQuery.

Jetzt ist der Unterschied das

$(document).readyist ein jQuery-Ereignis, das beim DOMLaden ausgelöst wird. Es wird also ausgelöst, wenn die Dokumentstruktur bereit ist.

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

Der Unterschied zwischen $(document).ready()und $(window).load()Funktionen besteht darin, dass der darin enthaltene Code ausgeführt $(window).load()wird, sobald die gesamte Seite (Bilder, Iframes, Stylesheets usw.) geladen wurde, während das Ereignis " Dokument bereit" ausgelöst wird, bevor alle Bilder, Iframes usw. geladen werden, jedoch nach dem gesamten DOM selbst ist bereit.

$(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 Verknüpfungsname verwenden.

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

Das Ready-Ereignis wird immer ausgeführt, wenn nur eine HTML-Seite in den Browser geladen und die Funktionen ausgeführt werden. Das Ladeereignis wird jedoch ausgeführt, wenn der gesamte Seiteninhalt für die Seite in den Browser geladen wurde. .. wir können $ oder jQuery verwenden, wenn wir die Methode noconflict () 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 ausgelöst wird, wenn das DOM und der gesamte Inhalt (alles) auf 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 möchten.

$ (document) .ready () gibt an, dass der darin enthaltene Code ausgeführt werden muss, sobald das DOM geladen und bereit ist, vom Skript bearbeitet zu werden. Es wird nicht darauf gewartet, dass 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>

$ (Fenster) .load wird nach $ (Dokument) .ready () ausgelöst.

$(document).ready(function(){

}) 
//and 
$(function(){

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

});

Über 3 sind gleich, $ 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 konfliktfreie Lösung. Lesen Sie mehr.

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