Fenster.onload-vs $(document).ready()

Den ready Ereignis tritt auf, nachdem das HTML-Dokument geladen wurde, während die onload Ereignis später Eintritt, wenn alle Inhalte (z.B. Bilder) auch geladen wurde.

Den onload Veranstaltung ist eine standard-Veranstaltung im DOM, während die ready Veranstaltung ist spezifisch für jQuery. Der Zweck der ready Fall ist, sollte es so bald wie möglich erfolgen, nachdem das Dokument geladen wurde, so dass code, fügt Funktionalität, um die Elemente in die Seite muss nicht warten, bis alle Inhalte geladen werden.

InformationsquelleAutor Guffa

$(document).ready() ist ein jQuery-event. JQuery $(document).ready() Methode wird aufgerufen, sobald das DOM bereit ist (was bedeutet, dass der browser analysiert die HTML-und baute den DOM-Baum). Dadurch können Sie code ausführen, sobald das Dokument bereit ist, manipuliert zu werden.

Zum Beispiel, wenn ein browser unterstützt das DOMContentLoaded-Ereignis (wie viele nicht-IE-Browsern nicht), dann wird es das Feuer auf das event. (Beachten Sie, dass das DOMContentLoaded-Ereignis wurde nur Hinzugefügt, um IE in IE9+.)

Beiden Syntaxen können verwendet werden für:

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

Oder die kürzere version:

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

Wichtigsten Punkte für $(document).ready():

• Es wird nicht warten, bis die Bilder geladen werden.
• Verwendet, um JavaScript auszuführen, wenn das DOM vollständig geladen wurde. Setzen Sie event-Handler hier.
• Kann mehrmals verwendet werden.
• Ersetzen $ mit jQuery wenn Sie " $ " ist nicht definiert."
• Nicht verwendet, wenn Sie wollen, um Bilder zu manipulieren. Verwenden $(window).load() statt.

window.onload() ist eine native JavaScript-Funktion. Die window.onload() event feuert, wenn alle Inhalte auf Ihrer Seite hat geladen, darunter DOM (document object model), banner-anzeigen und-Bilder. Ein weiterer Unterschied zwischen den beiden ist, dass, während wir mehr als eine $(document).ready() Funktion, wir können nur eine onload Funktion.

InformationsquelleAutor James Drinkard

Ein Wort der Vorsicht über die Verwendung $(document).ready() mit Internet Explorer. Wenn eine HTTP-Anforderung unterbrochen wird vor das gesamte Dokument geladen ist (zum Beispiel, wenn eine Seite das streaming an den browser, wird ein anderer link angeklickt wird) IE löst die $(document).ready Veranstaltung.

Wenn jeglicher code innerhalb der $(document).ready() event Referenzen DOM-Objekte, die Möglichkeit, für diese Objekte nicht gefunden werden, und Javascript-Fehler auftreten. Entweder schützen Sie Ihre Referenzen auf die Objekte, oder aufschieben code Referenzen auf diese Objekte, um das Fenster.load-Ereignis.

Ich nicht in der Lage dieses problem zu reproduzieren, in anderen Browsern (insbesondere Chrome und Firefox)

InformationsquelleAutor deck

Fenster.onload: Einer normalen JavaScript-Ereignis.

Dokument.bereit: Eine bestimmte jQuery-Ereignis aus, wenn das gesamte HTML geladen wurde.

InformationsquelleAutor Amir Mehdi Delta

Document.ready (ein jQuery-event) ausgelöst wird, wenn alle Elemente vorhanden sind, und Sie verwiesen werden kann, in dem JavaScript-code, aber der Inhalt ist nicht unbedingt geladen werden. Document.ready ausgeführt wird, wenn das HTML-Dokument geladen ist.

$(document).ready(function() {

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

Den window.load jedoch warten, bis die Seite vollständig geladen werden. Dies umfasst die inneren frames, Bilder, etc.

$(window).load(function() {

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

InformationsquelleAutor Mike Clark

Dokument.ready-Ereignis tritt ein, wenn das HTML-Dokument geladen wurde, und die window.onload Ereignis tritt immer später ein, wenn alle Inhalte (Bilder, etc) geladen wurde.

Können Sie die document.ready Ereignis, wenn Sie eingreifen wollen "früh" in den rendering-Prozess, ohne zu warten, für die Bilder zu laden.
Wenn Sie die Bilder (oder sonstige "Inhalte") bereit, bevor das Skript "etwas tut", müssen Sie warten, bis window.onload.

Zum Beispiel, wenn Sie die "Slide Show" - Muster, und Sie müssen, um Berechnungen, basierend auf der Bildgröße, möchten Sie vielleicht zu warten, bis window.onload. Sonst erleben Sie möglicherweise einige zufällige Probleme, je nachdem, wie schnell die Bilder geladen werden. Dein script gleichzeitig ausgeführt werden mit dem thread, der lädt die Bilder. Wenn Ihr Skript ist lang genug, oder der server ist schnell genug, Sie können nicht bemerkt ein problem, wenn die Bilder ankommen geschehen in der Zeit. Aber die sicherste Praxis wäre so für Bilder geladen werden.

document.ready könnte ein schönes event für Sie zu zeigen, einige "loading..." melden Sie sich an Benutzer, und auf window.onload können Sie eine vollständige Script, das die benötigten Ressourcen geladen werden, und schließlich entfernen Sie die "Laden..." - Zeichen.

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;

InformationsquelleAutor Nimesh khatri

Wenn Sie sagen $(document).ready(f) Sie sagen, script-engine, um Folgendes zu tun:

1. Holen Sie sich die Objekt-Dokument und drücken Sie es, da es nicht im lokalen Bereich, muss er ein hash-lookup-Tabelle zu finden, wo das Dokument ist, zum Glück Dokument ist Global gebunden, so ist es ein single-Suche.
2. finden das Objekt $ und wählen Sie es aus, da es nicht im lokalen Bereich, muss er ein hash-lookup-Tabelle, die möglicherweise oder möglicherweise nicht haben Kollisionen.
3. finden das Objekt f in global scope, die eine weitere hash-Tabelle lookup-oder push-Funktion-Objekt und initialisiert es.
4. nennen ready des ausgewählten Objekts, die mit einer anderen hash-Tabelle-lookup in das ausgewählte Objekt zu finden, die Methode und rufen Sie die Vervollständigung auf.
5. getan.

Im besten Fall ist dies 2 hash-Tabellen lookups, aber das ignorieren die schwere Arbeit, jQuery, wo $ ist die Spüle der alle möglichen Eingaben von jQuery, also eine andere Karte dürfte es bis zum Versand der Abfrage zu korrigieren handler.

Alternativ, Sie könnten dies tun:

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

die

1. finden das Objekt-Fenster im globalen Gültigkeitsbereich, wenn der JavaScript-Code optimiert ist, wird es wissen, dass da Fenster nicht geändert, es hat bereits das ausgewählte Objekt, so muss nichts getan werden.
2. Funktion Objekt geschoben wird auf den Operanden-stack.
3. prüfen, ob onload ist eine Eigenschaft oder nicht, indem eine hash-lookup-Tabelle, da ist es, es heißt wie eine Funktion.

Im besten Fall werden diese Kosten einem einzelnen hash-lookup-Tabelle, die notwendig ist, weil onload heruntergeladen werden müssen.

Idealerweise jQuery zusammenstellen würde, Ihre Abfragen auf strings eingefügt werden können, zu tun, was Sie wollten jQuery zu tun, aber ohne die runtime Versand von jQuery. Auf diese Weise haben Sie die Möglichkeit entweder

1. dynamische dispatch jquery-wie wir es heute tun.
2. haben jQuery kompilieren der Abfrage zu reinen JavaScript-string, der übergeben werden kann, um eval zu tun, was Sie wollen.
3. kopieren Sie das Ergebnis von 2 direkt in Ihren code ein, und überspringen Sie die Kosten für eval.

InformationsquelleAutor Dmitry