Unterschied zwischen pageLoad, onload & $ (document) .ready ()

8

Ich muss genauer wissen, was die Unterschiede zwischen pageLoad, onload & amp; $ (Dokument) .ready ()

Ich habe eine Antwort gefunden, aber das ist mir nicht klar. Die Antwort ist wie

  

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

     

Das onload-Ereignis ist ein Standardereignis im DOM, während das ready-Ereignis für jQuery spezifisch ist. Der Zweck des ready -Ereignisses ist, dass es so früh wie möglich nach dem Laden des Dokuments auftreten sollte, so dass Code, der den Elementen auf der Seite Funktionalität hinzufügt, nicht warten muss, bis alle Inhalte geladen sind.

Die Person, die versucht, das Ereignis "ready" zu sagen, tritt auf, nachdem das HTML-Dokument geladen wurde und das Onload-Ereignis tritt auf, nachdem alle Seitenelemente wie Bild usw. geladen wurden.

Was bedeutet das Laden von HTML-Dokumenten? Ich weiß, dass das Laden von HTML-Dokumenten bedeutet, dass alle Seitenelemente vollständig geladen sind.

Was bedeutet, dass dom bereit oder geladen ist? Was ist der Unterschied zwischen HTML-Dokument laden & amp; Domlast? Bitte mach mich mit einem Beispiel zu verstehen. Danke

    
Keith Costa 01.11.2011, 19:14
quelle

2 Antworten

11

Ich weiß nicht, was Sie mit pageLoad meinen, aber hier sind einige Informationen zu onload und $(document).ready() .

window.onload wird ausgelöst, wenn die gesamte Seite geladen wurde. Das bedeutet, dass nicht nur das gesamte DOM geladen wird, sondern auch alle verknüpften Ressourcen wie Bilder vollständig geladen sind. Da dies darauf wartet, dass Bilder vollständig geladen werden, kann es manchmal lange dauern, bis window.onload ausgelöst wird. Sofern Sie nicht wirklich warten müssen, bis Bilder vollständig geladen sind, möchten Sie im Allgemeinen nicht so lange warten, bis Sie Ihr JavaScript starten, das die Seite ändert oder Event-Handler einbindet, usw. ...

$(document).ready() ist ein jQuery-spezifisches Ereignis, das ausgelöst wird, sobald das DOM zur Bearbeitung bereit ist, aber möglicherweise lange bevor die Bilder geladen sind. Dies geschieht, nachdem alle im HTML-Code vorhandenen Objekte vom Browser analysiert und initialisiert wurden und nachdem alle Skripts auf der Seite geladen wurden. Im Moment dieses Ereignisses ist es sicher, das DOM in allen Browsern zu ändern. Dies kann sogar etwas früher oder später in einigen Browsern auftreten, da der Mechanismus zum Erkennen, wann das DOM sicher geladen ist, zwischen älteren und neueren Browsern variiert.

Die Implementierung von jQuery 1.6.x für $(document).ready() verwendet eine Reihe unterschiedlicher Erkennungsmechanismen, wenn das DOM bereit ist. Die bevorzugte Methode ist, wenn das Ereignis DOMContentLoaded für das Dokumentobjekt ausgelöst wird. Dieses Ereignis wird jedoch nur von einigen Browsern unterstützt, so dass es Ersatzmechanismen für andere Browser gibt.

Diese beiden Ereignisse werden nur einmal pro Seite ausgelöst.

    
jfriend00 01.11.2011, 19:24
quelle
0

Lassen Sie uns eine Analogie ziehen, um den Prozess des Ladens einer Webseite mit einem Koch mit einem Rezept zu vergleichen:

Zunächst liest der Koch (Browser) das gesamte Rezept (lädt das HTML-Dokument herunter), um sicherzustellen, dass er die Schritte versteht (HTML-Code) und dass er weiß, welche Zutaten (Bilder), Utensilien (Stylesheets) und Appliances (externe Skripte) muss er in seiner Küche haben (Browser Cache).

Während der Koch weiter liest, schickt er seinen Assistenten in die Speisekammer, um die Zutaten, Utensilien und Geräte zu holen (lädt die anderen Dateien vom Server herunter). Wenn er mit dem Lesen des Rezepts ( $(document).ready() ) fertig ist, beginnt er die Schritte zu befolgen (zeigt die Seite an), aber manchmal kommt er zu einem Schritt, bevor sein Assistent mit den notwendigen Materialien zurückkehrt, um diesen Schritt zu beenden. Er ist jedoch ziemlich geschickt, also ist er immer noch in der Lage, die späteren Schritte zu erledigen, während er wartet. (Die Analogie bricht hier nur ein bisschen zusammen, aber im Grunde genommen: Der Browser legt die Seite so gut wie möglich auf Basis des HTML an; wenn Sie eine Seite laden sehen, dann ändern sich die Schriftarten oder das Layout nach ein paar Sekunden, weil es schließlich habe das Stylesheet ... stell dir vor, dass dieser Koch irgendwie Eier zu einem Kuchen hinzufügen kann, der schon im Ofen ist.)

Erst nachdem der Assistent des Küchenchefs alles, was im Rezept angegeben ist, in die Küche zurückbringt (der Browser hat den gesamten Inhalt geladen), kann der Koch die fertige Mahlzeit auf den Teller legen und garnieren ( onload ausführen). Ereigniscode).

  

Das onload-Ereignis ist ein Standardereignis im DOM, während das ready-Ereignis jQuery-spezifisch ist.

Das DOM ist das Document Object Model, eine grundlegende Komponente von normalem JavaScript. Dies bedeutet, dass alle modernen Webbrowser bereits wissen, was onload bedeutet.

jQuery ist eine weit verbreitete JavaScript-Bibliothek. Damit das Skript $(document).ready() ordnungsgemäß verwendet, müssen Sie eine Verknüpfung zu einer Kopie der jQuery-Bibliothek herstellen. Browser wissen nicht, was $(document).ready() ohne jQuery bedeutet.

    
Dan Henderson 22.07.2016 19:17
quelle

Tags und Links