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:

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:

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!