JS -Methode:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
window.onload = function () {
var userername = "xiaoming";
Alarm (Benutzername);
}
</script>
Das Folgende ist die JQuery -Methode, und die Jquery -Datei muss verwiesen werden.
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
$ (Dokument) .Ready (function () {
var userername = "xiaoming";
Alarm (Benutzername);
});
</script>
Oder seine Abkürzung
Die Codekopie lautet wie folgt:
$ (function () {
var userername = "xiaoming";
Alarm (Benutzername);
});
Wenn das DOM geladen wird, kann es ausgeführt werden (früher als window.onload). Es kann mehrmals auf derselben Seite angezeigt werden.
PS: Der Hauptunterschied zwischen den beiden
window.onload:
Das Ereignis für das Fenster. Einload wird nur ausgelöst, wenn ein Dokument vollständig in den Browser heruntergeladen wird. Dies bedeutet, dass alle Elemente auf der Seite für JS betätigt werden können, was bedeutet, dass alle Elemente auf der Seite erst nach dem Laden ausgeführt werden. Diese Situation ist sehr vorteilhaft für das Schreiben von Funktionscode, da die Reihenfolge des Ladens nicht berücksichtigt wird. Anwesend
$ (Dokument) .Ready {}:
Wird aufgerufen, wenn das DOM vollständig bereit und verfügbar ist. Dies bedeutet zwar auch, dass alle Elemente für das Skript zugänglich sind, aber dies bedeutet nicht, dass alle zugehörigen Dateien heruntergeladen wurden. Mit anderen Worten, der Code wird ausgeführt, nachdem der HMTL -Download abgeschlossen und in einen DOM -Baum analysiert wurde.
Ein Beispiel geben:
Angenommen, es gibt eine Seite, die die Galerie darstellt, die viele große Bilder enthalten kann, die wir durch JQuery ausblenden, anzeigen oder auf andere Weise manipulieren können. Wenn wir die Schnittstelle über die Onload -Seite festlegen, muss der Benutzer warten, bis jedes Bild heruntergeladen wird, bevor Sie diese Seite verwenden können. Schlimmer noch, wenn das Verhalten zu Elementen mit Standardverhalten (wie Links) geringfügig hinzugefügt wird, kann die Interaktion des Benutzers zu unerwarteten Ergebnissen führen. Wenn wir jedoch versuchen, es mit $ (document) .Ready () {} festzulegen, erstellt diese Schnittstelle das früher verfügbare Verhalten.
Die Verwendung von $ (Dokument) .Ready () {} ist im Allgemeinen besser als das Versuch von Onload -Ereignishandlern, aber es muss klar sein, dass Eigenschaften wie Höhe und Breite des Bildes zu diesem Zeitpunkt möglicherweise nicht gültig sind, da die Support -Datei noch nicht abgeschlossen ist.
Hinweis: Es wird Probleme mit der Verwendung der Methode zum Einlegen von JS am Ende der Seite und der Methode zur Verwendung von Defer = "Defer" geben. Es ist am besten, die obige Funktion zu verwenden!