Was ist der Unterschied zwischen jquery $(document).ready() und onload

Unterschied: Es gibt keine vereinfachte Schreibmethode für window.onload. Es muss warten, bis alle Elemente auf der Seite, einschließlich Bilder, geladen sind, bevor es ausgeführt werden kann. Und „$(document).ready()“ kann als „$(function(){})“ abgekürzt werden, was nach dem Zeichnen der DOM-Struktur ausgeführt wird, ohne dass man warten muss, bis sie geladen ist.

Empfohlenes Tutorial: jquery-Video-Tutorial

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

1. Ausführungszeit

window .onload muss warten bis Die Ausführung kann erst erfolgen, nachdem alle Elemente auf der Seite, einschließlich Bilder, geladen wurden.
$(document).ready() wird ausgeführt, nachdem die DOM-Struktur gezeichnet wurde, ohne warten zu müssen, bis sie geladen ist.

2. Die Anzahl der Schreibvorgänge ist unterschiedlich.

window.onload kann nicht mehrmals gleichzeitig geschrieben werden. Wenn mehrere window.onload-Methoden vorhanden sind, wird nur eine ausgeführt. ready() kann mehrmals gleichzeitig geschrieben werden

3 Vereinfachte Schreibmethode

window.onload Es gibt keine vereinfachte Schreibmethode

$(document).ready(function() {}) kann als $(function(){}); abgekürzt werden JavaScript. Im regulären JavaScript-Code wird normalerweise die Methode window.onload verwendet, während in jQuery die Methode $(document).ready() verwendet wird. Die

$(document).ready()-Methode und die window.onload-Methode haben ähnliche Funktionen, es gibt jedoch Unterschiede im Ausführungszeitpunkt. Die window.onload-Methode wird ausgeführt, nachdem alle Elemente auf der Webseite (einschließlich der mit den Elementen verknüpften Dateien) vollständig in den Browser geladen wurden, d. h. JavaScript kann zu diesem Zeitpunkt nur auf jedes Element auf der Webseite zugreifen. Der über die Methode $(document).ready() in jQuery registrierte Ereignishandler kann aufgerufen werden, wenn das DOM vollständig bereit ist. Zu diesem Zeitpunkt sind alle Elemente der Webseite für jQuery zugänglich. Dies bedeutet jedoch nicht, dass die mit diesen Elementen verknüpften Dateien heruntergeladen wurden.

Zum Beispiel gibt es eine große Fotogalerie-Website, die allen Bildern auf der Webseite bestimmte Verhaltensweisen hinzufügt, z. B. das Ausblenden oder Anzeigen des Bilds nach dem Klicken darauf. Wenn die Methode window.onload verwendet wird, muss der Benutzer warten, bis jedes Bild geladen ist, bevor er fortfahren kann. Wenn Sie zum Einrichten die Methode $(document).ready() in jQuery verwenden, können Sie sie ausführen, sobald das DOM bereit ist, ohne auf den Download aller Bilder warten zu müssen. Offensichtlich ist das Parsen einer Webseite in einen DOM-Baum viel schneller als das Laden aller zugehörigen Dateien in der Webseite. Zu beachten ist außerdem, dass die zugehörige Datei des Elements zu diesem Zeitpunkt möglicherweise nicht heruntergeladen wird, da das in der Methode $(document).ready() registrierte Ereignis ausgeführt wird, solange das DOM bereit ist. 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 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 in JQuery eine andere Methode zum Laden von Seiten verwenden – die Methode „load()“. Die Methode „load()“ 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:

$(window).load(function () {
    //编写代码
})

Entspricht dem folgenden Code in JavaScript:

window.onload = function () {
    //编写代码
}

Angenommen, die Webseite enthält zwei Funktionen. Der JavaScript-Code lautet wie folgt:

function one() {
    alert("one");
}
function two() {
    alert("two");
}

Wenn die Webseite geladen wird, wird die eine Funktion und zwei werden jeweils über den Javascript-Code aufgerufen. Funktion:

window.onload = one;
window.onload = two;

Nach dem Ausführen des Codes wurde jedoch festgestellt, dass nur das Dialogfeld mit der Zeichenfolge „zwei“ angezeigt wurde.

Der Grund, warum das Dialogfeld „Eins“ nicht angezeigt werden kann, besteht darin, dass das Onload-Ereignis von JavaScript jeweils nur einen Verweis auf eine Funktion speichern kann. Dabei wird die vorherige Funktion automatisch mit der späteren Funktion überschrieben, sodass sie nicht hinzugefügt werden kann zum bestehenden Verhalten neues Verhalten.

Um den Effekt des sequentiellen Auslösens zweier Funktionen zu erzielen, kann dies nur durch Erstellen einer neuen JavaScript-Methode erreicht werden. Der JavaScript-Code lautet wie folgt:

window.onload = function () {
    one();
    two();
}

Obwohl der auf diese Weise geschriebene Code bestimmte Probleme lösen kann, ist er Bestimmte Anforderungen können immer noch nicht erfüllt werden. Beispielsweise gibt es mehrere JavaScript-Dateien und jede Datei muss die Methode window.onload verwenden. In diesem Fall ist es sehr mühsam, Code mit der oben genannten Methode zu schreiben. Sie können auf das gemeinsam genutzte Javascript-Onload-Ereignis verweisen, und die Methode $(document).ready() von jQuery kann diese Situationen gut bewältigen. Jeder Aufruf der Methode $(document).ready() fügt dem vorhandenen Verhalten neues Verhalten hinzu , werden diese Verhaltensfunktionen nacheinander entsprechend der Reihenfolge der Registrierung ausgeführt. Zum Beispiel der folgende jQuery-Code:

function one() {
    alert("one");
}
function two() {
    alert("two");
}
$(document).ready(function () {
    one();
});
$(document).ready(function () {
    two();
})

Nachdem der Code ausgeführt wurde, wird das Dialogfeld mit der Zeichenfolge „eins“ und anschließend das Dialogfeld mit der Zeichenfolge „zwei“ angezeigt

Weitere Kenntnisse in Bezug auf die Programmierung finden Sie unter :

Programmier-Tutorial

! !

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