Unterschied zwischen den Funktionen $ (Fenster) .load () und $ (Dokument) .ready ()

216

Was ist der Unterschied zwischen $(window).load(function() {})und $(document).ready(function() {})in jQuery?

jquery

— Satya
quelle

266

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

— Nick Craver
quelle

38

Die Abkürzung für $(document).ready(function(){})is $(function(){})und ein weiterer wichtiger Unterschied zum window.load besteht darin, dass es bei ALLEN zukünftigen Aufrufen der Funktion ausgeführt wird, auch nach dem ersten DOMready.

— Michael Butler

2

@dbliss Ja, ich glaube, Onload ist eine Abkürzung für $(window).on('load'). Beide verweisen auf das Ladeereignis .

— Free Lancer

5

@ MichaelButler - Was meinst du damit it will run on ALL future calls of the function?

— BornToCode

7

@ MichaelButler: Sie müssen in Ihrem Kommentar klarer sein. 1) Sie sprechen davon, dass der USER mehr $(document).readyCode ausführt , nachdem das DOM bereit ist. Das ist ein so kleiner Anwendungsfall, dass es wahrscheinlich nicht wert war, alle mit der Erwähnung zu verwechseln. 2) Die UMWELT ruft nur $(document).ready(f‌unction(){})einmal an, wenn das DOM bereit ist. Wenn der Benutzer aus irgendeinem Grund mehr ausführt, $(document).readynachdem das DOM bereit ist, wird es sofort ausgeführt.

— Doug S

4

Ich bin anderer Meinung, Michael. Lassen wir es einfach dabei und verschlechtern uns nicht zu nutzlosen Kommentaren. Zumindest die verwirrten Leute haben jetzt ihre Antwort.

— Doug S

73

$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});

— SagarPPanchal
quelle

22

Das $(window).load()ist in jQuery 3.0 NICHT verfügbar

$( window ).load(function() {
        // Handler for .load() called.
});

Um dies zu umgehen, können Sie es als "Event-Handler-Anhang" verwenden.

$( window ).on("load", function() {
        // Handler for .load() called.
});

— Kean Amaral
quelle

14

Der Unterschied ist:

$(document).ready(function() { ist ein jQuery-Ereignis, das beim Laden des 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.

— Bharat Chodvadiya
quelle

9

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://stackoverflow.com"></iframe>
</body>
</html>

window.load wird ausgelöst, nachdem der gesamte iframe-Inhalt geladen wurde

— Shaik Rasool
quelle

7

$(document).ready tritt auf, wenn alle Elemente im DOM vorhanden sind, aber nicht unbedingt alle Inhalte.

$(document).ready(function() {
    alert("document is ready");
});

window.onloadoder $(window).load()geschieht, nachdem alle Inhaltsressourcen (Bilder usw.) geladen wurden.

$(window).load(function() {
    alert("window is loaded");
});

— Purvik Dhorajiya
quelle

2

Aus der Perspektive von jquery - es ist nur das Hinzufügen load/ onloadEreignis zu Fenster und Dokument. Überprüfen Sie dies heraus:

window.onload vs document.onload

— Fantactuka
quelle

0

document.ready (jQuery) document.ready wird direkt ausgeführt, nachdem das HTML-Dokument geladen wurde und das DOM bereit ist.

DOM: Das Document Object Model (DOM) ist eine plattformübergreifende und sprachunabhängige Konvention zur Darstellung und Interaktion mit Objekten in HTML-, XHTML- und XML-Dokumenten.

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

window.load (integriertes JavaScript) Das window.load wartet jedoch darauf, dass die Seite vollständig geladen wird. Dies schließt innere Frames, Bilder usw. ein. * window.load ist eine integrierte JavaScript-Methode, von der bekannt ist, dass sie einige enthält Macken in alten Browsern (IE6, IE8, alte FF- und Opera-Versionen), funktionieren aber im Allgemeinen in allen.

window.load kann im folgenden Onload-Ereignis des Körpers verwendet werden (ich würde jedoch dringend empfehlen, das Mischen von Code wie diesem im HTML-Code zu vermeiden, da dies später zu Verwirrung führen kann):

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});

— Arun Kumar
quelle

0

$ (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 warten, 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.

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

— Srikrushna
quelle

0

Ich denke, das $(window).loadEreignis wird von JQuery 3.x nicht unterstützt

— user8816619
quelle

1

Gemäß der Dokumentation wurde das Ereignis $ (window) .load in JQuery 3.0

— Mathieu VIALES

1

Das ist richtig. Um dies zu umgehen, können Sie es als "Event Handler Attachment" verwenden: $ (window) .on ("load", function () {// Handler for .load () aufgerufen.});

— Kean Amaral

0

Laut DOM Level 2 Events soll das loadEvent ausgelöst werden document, nicht eingeschaltet window. Allerdings loadwird implementiert , auf windowin allen Browsern für die Abwärtskompatibilität.

— Jones Agyemang
quelle