Der Unterschied zwischen jquery $(document).ready() und window.onload

Die Funktion von $(

document).ready() in Jquery ähnelt der Methode window.onload im traditionellen JavaScript, ist es aber Anders als die window.onload-Methode Es gibt immer noch einen Unterschied.

1. Ausführungszeit

window.onload muss warten, bis alle Elemente auf der Seite, einschließlich Bilder, geladen sind, bevor es ausgeführt werden kann.
$(document).ready() wird ausgeführt, nachdem die DOM-Struktur gezeichnet wurde, ohne zu warten, bis sie geladen wird.

2. Schreiben Sie verschiedene Zahlen

Sie können nicht mehrere window.onload-Methoden gleichzeitig schreiben. Wenn mehrere window.onload-Methoden vorhanden sind, wird nur eine ausgeführt
$ (Dokument) .Ready () kann gleichzeitig geschrieben und ausgeführt werden

3. 3. Vereinfachtes Schreiben

Window.onload (document).ready(function(){}) kann als $(function(){}); abgekürzt werden.

In meiner vorherigen Entwicklung habe ich im Allgemeinen Javascript verwendet und immer den JQuery-Modus verwendet Meistens lautet die erste Zeile also:

Der Code lautet wie folgt:

$(document).ready(function(){

...
}) ;

Zu diesem Zeitpunkt müssen Sie nicht warten, bis alle js und Bilder geladen sind, bevor Sie einige Methoden ausführen können. Manchmal müssen Sie jedoch warten, bis alle

Zu ladende Elemente, z. B. einige Bilder oder andere Aspekte, werden zu diesem Zeitpunkt nicht geladen 🎜>

muss verwendet werden. Gehe zu:

Der Code lautet wie folgt:

$(window).load(function() {

$("#btn- upload").click(function(){ //Zum Beispiel gesagt:

uploadPhotos();
});
});


Das Folgende ist der reproduzierte Inhalt ,

verwenden Sie $(window).load(function() {...}) anstelle von body.onload()

Erstens sind es alle Bilder in allen Elementen der Seite (einschließlich
HTML-Tags
und Referenzen , Flash und andere Medien) werden nach dem Laden ausgeführt, das ist ihre Gemeinsamkeit Verwenden Sie nicht body.Onload() Grund 1:

Wenn wir mehrere Funktionen gleichzeitig laden möchten, müssen wir so schreiben:

ed5cb0397b63c7a89b89c225a7d5c20b36cc49f0c466276486e50c850b7e4956 Extrem hässlich. Wenn wir $(window).load() verwenden, können wir mehrere davon laden. Der Code der Funktion

lautet wie folgt:

$(window).load(function() {

                   Alert("Hallo, ich bin jQuery!"); > $(window).load(function() {

Alert("Hallo, ich bin auch jQuery");
});


So geschrieben wird es von oben nach unten ausgeführt. Diese beiden Funktionen sehen viel schöner aus

Grund 2, warum body.Onload() nicht verwendet wird:

Die Verwendung von body.Onload() kann js und html nicht vollständig trennen. Dies ist ein sehr ernstes Problem.

Darüber hinaus ist die Verwendung von $(window).load(function(){...}) und body. onload() hat das gleiche Problem, da sie, wie eingangs erwähnt, vor der Ausführung warten müssen, bis der gesamte Inhalt der Seite

geladen ist. Wenn die Netzwerkgeschwindigkeit jedoch relativ langsam ist, ist dies häufig der Fall Das Laden einer Seite dauert lange (von einigen Sekunden bis zu mehr als zehn Sekunden oder sogar länger ...), daher stoßen wir häufig auf Situationen, in denen die Seite noch nicht vollständig geladen ist Der Benutzer bedient die Seite bereits, daher unterscheidet sich der von der Seite angezeigte Effekt von dem, was wir erwartet haben.

Daher empfehle ich die Verwendung von $(document).ready(function(){}), oder abgekürzt als $(function(){}), da es geladen wird, nachdem das Dom-Element der Seite geladen wurde,

, ohne auf das Herunterladen von Bildern oder anderen Medien zu warten Manchmal müssen wir warten, bis alles auf der Seite geladen ist, bevor wir die Funktion ausführen, die wir ausführen möchten. Daher ist es wichtig, ob $(window).load(function(){...}) oder

Ob $(function(){}) verwendet werden soll, erfordert oft unterschiedliche Entscheidungen basierend auf spezifischen Anforderungen.

Schließlich hängen Sie einen Teil des jQuery-Codes an, der ausgeführt wird, bevor alle DOM-Elemente geladen werden

Der Code lautet wie folgt:

4ec11beb6c39d0703d1751d203c17053

(function() {

               Alert("DOM wurde noch nicht geladen!");

Nehmen Sie als Beispiel den Browser, der ein Dokument lädt. Nachdem die Seite geladen wurde, fügt der Browser über Javascript ein -Ereignis zum DOM-Element hinzu. Im regulären Javascript-Code wird normalerweise die Methode window.onload verwendet, während in Jquery die Methode $(document).ready() verwendet wird. Die Methode $(document).ready() ist die wichtigste Funktion im Ereignismodul, die die Geschwindigkeit von Webanwendungen erheblich verbessern kann.

window.load $(document).ready()
Ausführungszeitpunkt Sie müssen warten, bis der gesamte Inhalt der Webseite geladen ist (einschließlich Bilder), bevor er ausgeführt werden kann Alle DOM-Strukturen auf der Webseite werden angezeigt. Der mit dem DOM-Element verknüpfte Inhalt wurde nicht gleichzeitig geladen.
Der folgende Code kann nicht korrekt ausgeführt werden

Das Ergebnis ist nur die zweite Ausgabe.

window.onload = function(){ 
 alert(“text1”); 
}; 
window.onload = function(){ 
 alert(“text2”); 
};

Der folgende Code wird korrekt ausgeführt:

Das Ergebnis wird zweimal ausgegeben >Vereinfachtes Schreiben Keine

$(document).ready(function(){ 
 alert(“Hello World”); 
}); 
$(document).ready(function(){ 
 alert(“Hello again”); 
});

Außerdem muss noch etwas beachtet werden, denn in $(document) wird das in der Methode ready() registrierte Ereignis solange ausgeführt, wie das DOM bereit ist, also Die zugehörige Datei des Elements kann derzeit möglicherweise nicht heruntergeladen werden. Beispielsweise wurde der mit dem Bild verknüpfte HTML-Code heruntergeladen und in einen DOM-Baum geparst, aber es ist sehr wahrscheinlich, dass das Bild noch nicht geladen wurde, sodass Attribute wie die Höhe und Breite des Bildes zu diesem Zeitpunkt möglicherweise nicht gültig sind Zeit. Um dieses Problem zu lösen, können Sie eine andere Methode zum Laden von Seiten in Jquery verwenden – die Methode „load()“. Die Load()-Methode bindet eine Handlerfunktion an das Onload-Ereignis des Elements. Wenn die Handler-Funktion an das Fensterobjekt gebunden ist, wird sie ausgelöst, nachdem der gesamte Inhalt (einschließlich Fenster, Rahmen, Objekte, Bilder usw.) geladen wurde. Wenn die Handler-Funktion an ein Element gebunden ist, wird sie nach dem Laden ausgelöst Der Inhalt des Elements wird geladen.

Der JQuery-Code lautet wie folgt:

 $(function(){ 
 // do something 
});

$(window).load(function (){

                                                                                                                                                                                  ; (){
// Code schreiben
}

——— ———————————————————————————

Als ich kürzlich eine in einen Frame eingebettete Seite geändert habe, habe ich JQuery für den Effekt verwendet. und die Seite selbst war ebenfalls an das Onload-Ereignis gebunden. Nach der Änderung läuft der Test unter Firefox normal und reibungslos, aber unter IE dauert es mehr als zehn Sekunden, bis der JQuery-Effekt auftritt, und die Taglilie ist kalt.

Zuerst dachte ich, dass es einen Konflikt mit der Onload-Methode gibt. Ein im Internet verbreitetes Sprichwort besagt, dass $(document).ready() nach Abschluss der Seiten-DOM-Analyse ausgeführt wird und das Onload-Ereignis ausgeführt wird, nachdem alle Ressourcen vorbereitet sind. Mit anderen Worten: $(document).ready(). Wird ausgeführt, nachdem die DOM-Analyse der Seite abgeschlossen ist. Wird vor dem Laden ausgeführt, insbesondere wenn die Seitenbilder größer und mehr sind, kann der Zeitunterschied größer sein. Auf meiner Seite wurde das Bild jedoch länger als zehn Sekunden angezeigt, der JQuery-Effekt ist jedoch noch nicht aufgetreten.

Versuchen Sie, die Onload-Lademethode zu löschen, aber das Ergebnis ist immer noch dasselbe. Es scheint, dass keine Notwendigkeit besteht, $(document).ready() zu verwenden, um die ursprüngliche Onload-Ereignisbindung zu schreiben. Was ist der Grund, warum Firefox funktioniert, IE jedoch? Beim Debuggen stellte ich fest, dass die ursprünglich gebundene Onload-Methode unter IE vor dem Inhalt von $(document).ready() ausgeführt wurde, während Firefox zuerst den Inhalt von $(document).ready() und dann den ursprünglichen Onload ausführte Methode. Das scheint nicht ganz mit dem übereinzustimmen, was online gesagt wird, es ist interessant, es kommt der Wahrheit näher.

Sehen Sie sich den Quellcode von jquery an, um zu sehen, wie $(document).ready() implementiert ist

Das Ergebnis ist sehr klar, IE funktioniert nur, wenn die Seite nicht eingebettet ist in einem Frame Der nächste Schritt ist der gleiche wie bei Firefox usw. Führen Sie zuerst den Inhalt von $(document).ready() aus und führen Sie dann die ursprüngliche Onload-Methode aus. Für in Frames eingebettete Seiten sind sie zur Ausführung nur an das Ladeereignis gebunden. Daher ist es natürlich an der Reihe, nachdem die ursprüngliche Onload-Bindungsmethode ausgeführt wurde. Und diese Seite verfügt zufällig über eine Ressource, auf die in der Testumgebung nicht zugegriffen werden kann, und die Verzögerung von mehr als zehn Sekunden entspricht genau dem Zeitunterschied, den sie verstärkt.

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen jquery $(document).ready() und window.onload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!