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

Question

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

Answer 1

Eine Sache, an die man sich erinnern sollte (oder sollte ich sagen, zurückrufen), ist, dass man onload-Funktionen nicht stapeln kann, wie man es mit ready kann. Mit anderen Worten, die jQuery-Magie ermöglicht mehrere ready-Funktionen auf derselben Seite, aber das geht nicht mit onload.

Das letzte onload wird alle vorherigen onload-Funktionen außer Kraft setzen.

Eine gute Lösung dafür ist eine Funktion, die anscheinend von einem gewissen Simon Willison geschrieben wurde und in Verwendung mehrerer JavaScript-Onload-Funktionen beschrieben wird.

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

// Beispiel für die Verwendung:
addLoadEvent(NameDerFunktionDieBeimSeitenladenAusgeführtWerdenSoll);
addLoadEvent(function() {
  /* Mehr Code, der beim Laden der Seite ausgeführt werden soll */
});

Answer 2

Document.ready (ein jQuery-Ereignis) wird ausgelöst, wenn alle Elemente an ihrem Platz sind und sie im JavaScript-Code referenziert werden können, aber der Inhalt ist nicht unbedingt geladen. Document.ready wird ausgeführt, wenn das HTML-Dokument geladen ist.

$(document).ready(function() {

    // Auszuführender Code
    alert("Dokument ist bereit");
});

Das window.load hingegen wartet darauf, dass die Seite vollständig geladen ist. Dies beinhaltet innere Frames, Bilder, etc.

$(window).load(function() {

    // Wird ausgelöst, wenn die Seite vollständig geladen ist
    alert("Fenster ist geladen");
});

Answer 3

Das document.ready-Ereignis tritt auf, wenn das HTML-Dokument geladen wurde, und das window.onload-Ereignis tritt immer später auf, wenn alle Inhalte (Bilder usw.) geladen wurden.

Sie können das document.ready-Ereignis verwenden, wenn Sie frühzeitig in den Renderprozess eingreifen möchten, ohne auf das Laden der Bilder zu warten. Wenn Sie die Bilder (oder andere "Inhalte") benötigen, bevor Ihr Skript "etwas macht", müssen Sie bis zum window.onload warten.

Zum Beispiel, wenn Sie ein "Slide Show"-Muster implementieren und Berechnungen basierend auf Bildgrößen durchführen müssen, möchten Sie möglicherweise bis zum window.onload warten. Andernfalls könnten Sie je nach Geschwindigkeit, mit der die Bilder geladen werden, auf einige zufällige Probleme stoßen. Ihr Skript würde gleichzeitig mit dem Thread laufen, der Bilder lädt. Wenn Ihr Skript lang genug ist oder der Server schnell genug ist, könnten Sie kein Problem bemerken, wenn die Bilder rechtzeitig ankommen. Aber die sicherste Praxis wäre es, darauf zu warten, dass die Bilder geladen werden.

document.ready könnte für Sie ein schönes Ereignis sein, um Benutzern ein "Laden..."-Zeichen anzuzeigen, und bei window.onload können Sie jedes Skript vervollständigen, das geladene Ressourcen benötigt, und dann schließlich das "Laden..."-Zeichen entfernen.

Beispiele :

// Dokument fertig Ereignisse
$(document).ready(function(){
     alert("Dokument ist bereit..");
})

// Verwendung von JQuery
$(function(){
   alert("Dokument ist bereit..");
})

// Fenster geladen Ereignis
function myFunction(){
  alert("Fenster ist geladen..");
}
window.onload = myFunction;

Answer 4

Die Zeit vergeht, jetzt ist es ECMAScript 2021 und IE11 wird von immer weniger Menschen verwendet. Die zwei wichtigsten Ereignisse im Gegensatz sind load und DOMContentLoaded.

DOMContentLoaded wird nachdem das ursprüngliche HTML-Dokument vollständig geladen und analysiert wurde, ausgelöst.

load wird nach DOMContentLoaded und dem vollständigen Laden der gesamten Seite ausgelöst, unter Warten auf das Abschließen aller abhängigen Ressourcen. Beispiel für Ressourcen: Skripte, Stylesheets, Bilder und Iframes usw.

WICHTIG: Synchrone Skripte werden das Analysieren des DOMs anhalten.

Beide Ereignisse können verwendet werden, um festzustellen, ob der DOM verwendet werden kann oder nicht. Zum Beispiel:

    // DOM wurde noch nicht vollständig analysiert
    document.body; // null

    window.addEventListener('DOMContentLoaded', () => {
        // Nun den DOM sicher manipulieren
        document.querySelector('#id');
        document.body.appendChild();
    });

    /**
     * Sollte nur verwendet werden, um eine vollständig geladene Seite zu erkennen.
     * 
     * Wenn Sie den DOM einfach sicher manipulieren möchten, ist `DOMContentLoaded` besser.
     */
    window.addEventListener('load', () => {
        // Auch den DOM sicher manipulieren
        document.links;
    });

Answer 5

window.onload ist eine JavaScript-eingebaute Funktion. window.onload wird ausgelöst, wenn die HTML-Seite geladen wird. window.onload kann nur einmal geschrieben werden.

document.ready ist eine Funktion der jQuery-Bibliothek. document.ready wird ausgelöst, wenn HTML und all der JavaScript-Code, CSS und Bilder, die in der HTML-Datei enthalten sind, vollständig geladen sind. document.ready kann je nach Bedarf mehrmals geschrieben werden.