webentwicklung-frage-antwort-db.com.de

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

Was sind die Unterschiede zwischen der window.onload -Methode von JavaScript und der $(document).ready() -Methode von jQuery?

1186
Vaibhav Jain

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

Das Ereignis onload ist ein Standardereignis im DOM, während das Ereignis ready für jQuery spezifisch ist. Das Ereignis ready soll so früh wie möglich nach dem Laden des Dokuments auftreten, damit Code, der den Elementen auf der Seite Funktionen hinzufügt, nicht auf das Laden des gesamten Inhalts warten muss.

1190
Guffa

window.onload ist das eingebaute JavaScript-Ereignis, aber da seine Implementierung subtile Macken zwischen Browsern aufwies (Firefox, Internet Explorer 6, Internet Explorer 8) , und Opera ), jQuery liefert document.ready, das diese abstrahiert und ausgelöst wird, sobald das DOM der Seite fertig ist (wartet nicht auf Bilder usw.).

$(document).ready (beachten Sie, dass es sich bei nicht um document.ready handelt, das nicht definiert ist) ist eine jQuery-Funktion, die umschließt und bereitstellt Konsistenz zu folgenden Ereignissen:

  • document.ondomcontentready/document.ondomcontentloaded - Ein neues Ereignis, das ausgelöst wird, wenn das DOM des Dokuments geladen wird (möglicherweise einige Zeit vor den Bildern usw. geladen sind); wieder etwas anders im Internet Explorer und im Rest der Welt
  • und window.onload (das auch in alten Browsern implementiert ist), das beim Laden der gesamten Seite (Bilder, Stile usw.) ausgelöst wird.
132
Piskvor

$(document).ready() ist ein jQuery-Ereignis. Die $(document).ready() -Methode von JQuery wird aufgerufen, sobald das DOM fertig ist (was bedeutet, dass der Browser den HTML-Code analysiert und den DOM-Baum erstellt hat). Auf diese Weise können Sie Code ausführen, sobald das Dokument zur Bearbeitung bereit ist.

Wenn ein Browser beispielsweise das Ereignis DOMContentLoaded unterstützt (wie dies bei vielen anderen Browsern der Fall ist), wird er bei diesem Ereignis ausgelöst. (Beachten Sie, dass das Ereignis DOMContentLoaded nur zu IE in IE9 + hinzugefügt wurde.)

Hierzu können zwei Syntaxen verwendet werden:

$( document ).ready(function() {
   console.log( "ready!" );
});

Oder die Kurzfassung:

$(function() {
   console.log( "ready!" );
});

Hauptpunkte für $(document).ready():

  • Es wird nicht darauf gewartet, dass die Bilder geladen werden.
  • Wird zum Ausführen von JavaScript verwendet, wenn das DOM vollständig geladen ist. Fügen Sie hier Event-Handler ein.
  • Kann mehrfach verwendet werden.
  • Ersetzen Sie $ durch jQuery, wenn Sie "$ is not defined" erhalten.
  • Wird nicht verwendet, wenn Sie Bilder bearbeiten möchten. Verwenden Sie stattdessen $(window).load().

window.onload() ist eine native JavaScript-Funktion. Das Ereignis window.onload() wird ausgelöst, wenn der gesamte Inhalt Ihrer Seite geladen wurde, einschließlich DOM (Document Object Model), Bannerwerbung und Bilder. Ein weiterer Unterschied zwischen den beiden besteht darin, dass wir zwar mehr als eine $(document).ready() -Funktion haben können, aber nur eine onload -Funktion.

85
James Drinkard

Ein Windows-Ladeereignis wird ausgelöst, wenn der gesamte Inhalt Ihrer Seite vollständig geladen ist, einschließlich des DOM-Inhalts (Dokumentobjektmodell) und asynchrones JavaScript , Frames und Bilder . Sie können auch body onload = verwenden. Beide sind gleich; window.onload = function(){} und <body onload="func();"> sind verschiedene Möglichkeiten, dasselbe Ereignis zu verwenden.

jQuery $document.ready Funktionsereignis wird etwas früher als window.onload ausgeführt und aufgerufen, sobald das DOM (Dokumentobjektmodell) geladen wurde deine Seite. Es wird nicht darauf gewartet, dass die Bilder und Frames vollständig geladen werden .

Aus dem folgenden Artikel entnommen: wie sich $document.ready() von window.onload() unterscheidet

42
Vivek

Ein Wort der Vorsicht bei der Verwendung von $(document).ready() mit Internet Explorer. Wenn eine HTTP-Anforderung unterbrochen wird vorher wird das gesamte Dokument geladen (während beispielsweise eine Seite zum Browser gestreamt wird, wird auf einen anderen Link geklickt) IE löst das Ereignis $(document).ready aus.

Wenn Code innerhalb des Ereignisses $(document).ready() auf DOM-Objekte verweist, besteht die Möglichkeit, 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 diese Objekte auf das window.load-Ereignis verweist.

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

22
deck
$(document).ready(function() {

    // Executes when the HTML document is loaded and the DOM is ready
    alert("Document is ready");
});

// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {

     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
20
dev4092

Veranstaltungen

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

$(document).on('load', handler) ist ein Ereignis, das ausgelöst wird, sobald alle Ressourcen vom Server geladen wurden . Bilder werden jetzt geladen. Während onload ein unformatiertes HTML-Ereignis ist, wird 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 wird es an das Ereignis ready- gebunden.

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

Weitere Lektüre

16
abstraktor

Ein kleiner Tipp:

Immer Verwenden Sie den window.addEventListener, um ein Ereignis zum Fenster hinzuzufügen. Auf diese Weise können Sie den Code in verschiedenen Ereignishandlern ausführen.

Richtiger Code:

window.addEventListener('load', function () {
  alert('Hello!')
})

window.addEventListener('load', function () {
  alert('Bye!')
})

ngültiger Code:

window.onload = function () {
  alert('Hello!') // it will not work!!!
}

window.onload = function () {
  alert('Bye!') 
}

Dies liegt daran, dass Onload nur eine Eigenschaft des Objekts ist, das überschrieben wird.

In Analogie zu addEventListener ist es besser, $(document).ready() zu verwenden, als onload.

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 inklusive bilder auf der seite geladen ist.

Auch window.onload ist 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 alle geladenen Elemente in jQuery verwendet werden ...

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

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

        readyList = jQuery.Deferred();

        // Catch cases where $(document).ready() is called after the browser event has already occurred.
        // we once tried to use readyState "interactive" here, but it caused issues like the one
        // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
        if ( document.readyState === "complete" ) {
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready );

        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed, false );

        // If IE event model is used
        } else {
            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", completed );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", completed );

            // If IE and not a frame
            // continually check to see if the document is ready
            var top = false;

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

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

                        try {
                            // Use the trick by Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }

                        // detach all dom ready events
                        detach();

                        // and execute any waiting functions
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
    // Add the callback
    jQuery.ready.promise().done( fn );

    return this;
};

Außerdem habe ich das folgende Bild als Kurzreferenz für beide erstellt:

enter image description here

13
Alireza

window.onload: Ein normales JavaScript-Ereignis.

document.ready: Ein bestimmtes jQuery-Ereignis, wenn der gesamte HTML-Code geladen wurde.

12

Eine Sache, an die Sie sich erinnern sollten (oder an die ich mich erinnern sollte), ist, dass Sie onload nicht so stapeln können, wie Sie es mit ready können. Mit anderen Worten, jQuery Magic lässt mehrere readys auf derselben Seite zu, aber dies ist mit onload nicht möglich.

Das letzte onload überschreibt alle vorherigen onloads.

Eine gute Möglichkeit, damit umzugehen, ist eine Funktion, die anscheinend von einem Simon Willison geschrieben und in Verwenden mehrerer JavaScript-Onload-Funktionen beschrieben wurde. .

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

// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* More code to run on page load */
});
11

Document.ready (ein jQuery-Ereignis) wird ausgelöst, wenn alle Elemente vorhanden sind und im JavaScript-Code auf sie verwiesen werden kann, der Inhalt jedoch nicht unbedingt geladen wird. Document.ready wird ausgeführt, wenn das HTML-Dokument geladen wird.

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

Der window.load wartet jedoch darauf, dass die Seite vollständig geladen wird. Dies schließt innere Rahmen, Bilder usw. ein.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});
11
Mike Clark

Das document.ready-Ereignis tritt ein, wenn das HTML-Dokument geladen wurde, und das window.onload -Ereignis tritt immer später auf, wenn der gesamte Inhalt (Bilder usw.) geladen wurde.

Sie können das Ereignis document.ready verwenden, wenn Sie "früh" in den Rendervorgang eingreifen möchten, ohne auf das Laden der Bilder zu warten. Wenn Sie die Bilder (oder einen anderen "Inhalt") benötigen, bevor Ihr Skript "etwas tut", müssen Sie warten, bis window.onload.

Wenn Sie beispielsweise ein "Diashow" -Muster implementieren und Berechnungen basierend auf den Bildgrößen durchführen müssen, möchten Sie möglicherweise warten, bis window.onload. Andernfalls kann es zu zufälligen Problemen kommen, je nachdem, wie schnell die Bilder geladen werden. Ihr Skript würde gleichzeitig mit dem Thread ausgeführt, der Bilder lädt. Wenn Ihr Skript lang genug ist oder der Server schnell genug ist, stellen Sie möglicherweise kein Problem fest, wenn die Bilder rechtzeitig eintreffen. Am sichersten ist es jedoch, Bilder laden zu lassen.

document.ready könnte ein nettes Ereignis sein, bei dem Sie Benutzern ein "loading ..." - Zeichen anzeigen. Nach window.onload können Sie alle Skripte ausführen, für die Ressourcen geladen wurden, und anschließend das "Loading" entfernen ..." Schild.

Beispiele: -

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

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

// window on load event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;
5
Nimesh khatri

window.onload ist eine in 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 sämtlicher JavaScript-Code, CSS und Bilder, die in der HTML-Datei enthalten sind, vollständig geladen sind. document.ready kann je nach Anforderung mehrmals geschrieben werden.

2
Amit

Wenn Sie $(document).ready(f) sagen, weisen Sie die Skript-Engine an, Folgendes zu tun:

  1. holen Sie sich das Objektdokument und drücken Sie es, da es nicht im lokalen Bereich ist, muss es eine Hash-Tabellensuche durchführen, um herauszufinden, wo sich das Dokument befindet. Glücklicherweise ist das Dokument global gebunden, sodass es eine einzelne Suche ist.
  2. suchen Sie das Objekt $ und wählen Sie es aus. Da es sich nicht im lokalen Bereich befindet, muss es eine Hash-Tabellensuche durchführen, die möglicherweise Kollisionen aufweist oder nicht.
  3. suchen Sie das Objekt f im globalen Bereich, bei dem es sich um eine andere Hashtabellensuche handelt, oder geben Sie das Push-Funktionsobjekt ein und initialisieren Sie es.
  4. rufen Sie ready des ausgewählten Objekts auf, wodurch eine weitere Hashtabellensuche in das ausgewählte Objekt durchgeführt wird, um die Methode zu finden und aufzurufen.
  5. getan.

Im besten Fall handelt es sich um 2 Hash-Tabellensuchen, wobei jedoch die umfangreiche Arbeit von jQuery ignoriert wird, wobei $ die Küchenspüle aller möglichen Eingaben für jQuery ist, sodass wahrscheinlich eine andere Map die Abfrage an diese sendet richtiger Handler.

Alternativ können Sie dies tun:

window.onload = function() {...}

welches wird

  1. suchen Sie das Objektfenster im globalen Bereich. Wenn Sie JavaScript optimieren, wissen Sie, dass das Fenster nicht geändert wurde und das ausgewählte Objekt bereits vorhanden ist. Sie müssen also nichts tun.
  2. funktionsobjekt wird auf den Operandenstapel verschoben.
  3. überprüfen Sie, ob onload eine Eigenschaft ist oder nicht, indem Sie eine Hash-Tabellensuche durchführen, da dies so ist, dass es wie eine Funktion aufgerufen wird.

Im günstigsten Fall kostet dies eine einzelne Hash-Tabellensuche, die erforderlich ist, da onload abgerufen werden muss.

Im Idealfall kompiliert jQuery ihre Abfragen in Zeichenfolgen, die eingefügt werden können, um die von jQuery gewünschten Aufgaben zu erfüllen, jedoch ohne das Laufzeit-Dispatching von jQuery. Auf diese Weise haben Sie eine der beiden Möglichkeiten

  1. erledige den dynamischen Versand von Anfragen wie wir es heute tun.
  2. lassen Sie jQuery Ihre Abfrage zu einer reinen JavaScript-Zeichenfolge kompilieren, die an eval übergeben werden kann, um das zu tun, was Sie möchten.
  3. kopieren Sie das Ergebnis von 2 direkt in Ihren Code und überspringen Sie die Kosten für eval.
1
Dmitry

Stellen Sie sich ein Szenario vor, in dem Sie zwei Teilansichten innerhalb der Indexseite haben

Beispiel

    <div id="ReportHere" class="container-fluid">
        @Html.Action("ProjectAbc", "ProjectSalesVolume", new { reportType = "Projected Sales Volume", region = "Karachi", sector = "All" })
    </div>


@Html.Action("AbcFilters", "ProjectSalesVolume")

Jetzt hat die Seite action ProjectAbc ein Skript in der Funktion window.onload

Beispiel Diagramm

window.onload = function () {

debugger;
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2", // "light1", "light2", "dark1", "dark2"
title: {
    text: '@(Model.topTitleChart)'
},
axisY: {
    title:  '@(Model.leftTitleChart)'
},
data: [{
    type: "column",
    indexLabel: "{y}",
    indexLabelPlacement:"inside",
    dataPoints: @Html.Raw(Model.dataPoints)
    }]
 });
 chart.render();

 }

und Aktion hat Rückgabetyp Teilansicht.

  return PartialView("ProjectAbc", model);

Und die Filterseite hat wieder einen Rückruf an ProjectAbc

Beispiel

@using (Ajax.BeginForm("ProjectAbc", new AjaxOptions { HttpMethod = "Post" }))
 {
      //property binding here
     <input type="submit" value="filter"/>

 }

Jetzt wird die Methode inside window.onload zum ersten Mal nach dem Laden der Afterpage aufgerufen, wenn Sie in der Filteransicht (die mit ProjectAbc innerhalb der Indexseite gerendert wird) auf filter klicken. In diesem Szenario benötigen wir also document.ready, weil window.onload wird nur einmal aufgerufen, wenn die Seite aktualisiert wird

0