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

Question

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

Answer 1

$(document).ready(function() {

    // Wird ausgeführt, wenn das HTML-Dokument geladen ist und der DOM bereit ist
    alert("Dokument ist bereit");
});

// .load() Methode ab jQuery 1.8 veraltet
$(window).on("load", function() {

     // Wird ausgeführt, wenn die gesamte Seite vollständig geladen ist, einschließlich
     // aller Frames, Objekte und Bilder
     alert("Fenster ist geladen");
});

Answer 2

Das $(document).ready() ist ein jQuery-Ereignis, das auftritt, wenn das HTML-Dokument vollständig geladen wurde, während das window.onload-Ereignis später auftritt, wenn alles, einschließlich der Bilder auf der Seite, geladen wurde.

Außerdem ist window.onload ein reines JavaScript-Ereignis im DOM, während das $(document).ready()-Ereignis eine Methode in jQuery ist.

$(document).ready() ist normalerweise der Wrapper für jQuery, um sicherzustellen, dass die Elemente geladen sind, um sie in jQuery zu verwenden...

Schauen Sie sich den jQuery-Quellcode an, um zu verstehen, wie es funktioniert:

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {

        readyList = jQuery.Deferred();

        // Fangen Sie Fälle ab, in denen $(document).ready() aufgerufen wird, nachdem das Browserereignis bereits aufgetreten ist.
        // Wir haben einmal versucht, hier readyState "interactive" zu verwenden, aber es verursachte Probleme wie das
        // von ChrisS hier entdeckte: http://bugs.jquery.com/ticket/12282#comment:15
        if ( document.readyState === "complete" ) {
            // Behandeln Sie es asynchron, um Skripts die Möglichkeit zu geben, die Bereitschaft zu verzögern
            setTimeout( jQuery.ready );

        // Browser mit Standards unterstützen DOMContentLoaded
        } else if ( document.addEventListener ) {
            // Verwenden Sie das praktische Ereignis-Callback
            document.addEventListener( "DOMContentLoaded", completed, false );

            // Ein Fallback zu window.onload, das immer funktionieren wird
            window.addEventListener( "load", completed, false );

        // Wenn das IE-Ereignismodell verwendet wird
        } else {
            // Stellen Sie sicher, dass das Feuern vor dem Laden erfolgt, vielleicht spät, aber auch sicher für IFrames
            document.attachEvent( "onreadystatechange", completed );

            // Ein Fallback zu window.onload, das immer funktionieren wird
            window.attachEvent( "onload", completed );

            // Wenn IE und kein Frame verwendet wird
            // überprüfen Sie fortlaufend, ob das Dokument bereit ist
            var top = false;

            try {
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}

            if ( top && top.doScroll ) {
                (function doScrollCheck() {
                    if ( !jQuery.isReady ) {

                        try {
                            // Verwenden Sie den Trick von Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }

                        // entfernen Sie alle DOM-Ready-Ereignisse
                        detach();

                        // und führen Sie alle wartenden Funktionen aus
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
    // Fügen Sie das Rückruf hinzu
    jQuery.ready.promise().done( fn );

    return this;
};

Außerdem habe ich das untenstehende Bild als schnelle Referenz für beide erstellt:

Answer 3

Ein Wort der Warnung bei der Verwendung von $(document).ready() mit Internet Explorer. Wenn eine HTTP-Anforderung unterbrochen wird bevor das gesamte Dokument geladen ist (zum Beispiel, während eine Seite zum Browser gestreamt wird und ein anderer Link angeklickt wird), wird IE das $(document).ready Ereignis auslösen.

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

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

Answer 4

Veranstaltungen

$(document).on('ready', handler) bindet an das bereit-Ereignis von jQuery. Der Handler wird aufgerufen wenn das DOM geladen ist. Ressourcen wie Bilder fehlen möglicherweise noch. Es wird nie aufgerufen, wenn das Dokument zum Zeitpunkt des Bindens bereit ist. jQuery verwendet das DOMContentLoaded-Ereignis dafür und emuliert es, wenn es nicht verfügbar ist.

$(document).on('load', handler) ist ein Ereignis, das einmal ausgelöst wird, wenn alle Ressourcen vom Server geladen sind. Bilder werden jetzt geladen. Während onload ein reines HTML-Ereignis ist, wurde ready von jQuery erstellt.

Funktionen

$(document).ready(handler) ist eigentlich ein Versprechen. Der Handler wird sofort aufgerufen, wenn das Dokument zum Zeitpunkt des Aufrufs bereit ist. Andernfalls bindet es an das ready-Ereignis.

Vor jQuery 1.8 gab es $(document).load(handler) als Alias für $(document).on('load',handler).

Weiterführende Literatur

• Das Timing
• Zur Funktion ready
• Ein Beispiel
• Versprechen
• Der entfernte Ereignis-Alias

Answer 5

window.onload: Ein normales JavaScript-Ereignis.

document.ready: Ein spezifisches jQuery-Ereignis, wenn das gesamte HTML geladen wurde.