Zwei Methoden zum Ausführen eines JS, nachdem die HTML-Seite geladen wurde

In diesem Artikel werden hauptsächlich zwei Methoden zum Ausführen eines bestimmten js nach dem Laden der HTML-Seite vorgestellt. Freunde, die es benötigen, können sich auf die

js-Methode beziehen:

Code kopieren Der Code lautet wie folgt:

<script type="text/javascript"> 
window.onload=function(){ 
var userName="xiaoming"; 
alert(userName); 
} 
</script>

Das Folgende ist die jQuery-Methode, die auf die jQuery-Datei verweisen muss.

Code kopierenDer Code lautet wie folgt:

<script type="text/javascript"> 

$(document).ready(function(){ 

var userName="xiaoming"; 

alert(userName); 
}); 

</script>

oder seine Abkürzung

Code kopieren Der Code lautet wie folgt:

$(function(){ 
var userName="xiaoming"; 
alert(userName); 
});

Er kann ausgeführt werden, wenn der Dom geladen wird (früher als window.onload). .ready() kann mehrmals auf derselben Seite erscheinen

PS: Der Hauptunterschied zwischen den beiden

window.onload:

Wenn ein Dokument vollständig auf die heruntergeladen wird browser wird das window.onload-Ereignis ausgelöst. Dies bedeutet, dass alle Elemente auf der Seite für js bedienbar sind, was bedeutet, dass alle Elemente auf der Seite erst ausgeführt werden, wenn sie geladen werden. Diese Situation ist für das Schreiben von Funktionscode sehr vorteilhaft, da die Reihenfolge des Ladens nicht berücksichtigt werden muss. ,

$(document).ready{ }:

wird aufgerufen, wenn das DOM vollständig bereit und einsatzbereit ist. Dies bedeutet zwar auch, dass das Skript auf alle Elemente zugreifen kann, es bedeutet jedoch nicht, dass alle zugehörigen Dateien heruntergeladen wurden. Mit anderen Worten: Der Code wird ausgeführt, nachdem die HTML heruntergeladen und in einen DOM-Baum geparst wurde.

Geben Sie ein Beispiel:

Angenommen, es gibt eine Seite, die eine Galerie darstellt. Diese Seite kann viele große Bilder enthalten. Wir können diese Bilder über jQuery ausblenden. Wenn wir die Schnittstelle über die Onload-Seite einrichten, muss der Benutzer warten, bis jedes Bild heruntergeladen ist, bevor er diese Seite verwenden kann. Schlimmer noch: Wenn das Verhalten geringfügig zu Elementen hinzugefügt wird, die über ein Standardverhalten verfügen (z. B. Links), kann die Benutzerinteraktion zu unerwarteten Ergebnissen führen. Wenn wir jedoch versuchen, es mit $(document).ready(){ } einzurichten, ist die Schnittstelle früher mit korrektem Verhalten bereit.

Die Verwendung von $(document).ready(){ } ist im Allgemeinen besser als das Ausprobieren des Onload-Ereignishandlers, aber es muss klar sein, dass die Unterstützungsdatei möglicherweise noch nicht abgeschlossen ist, also so etwas wie Eigenschaften wie Bild Höhe und Breite sind derzeit nicht unbedingt gültig.

Hinweis: Es wird Probleme geben, js unten auf der Seite zu platzieren und defer="defer" zu verwenden. Benutzen Sie besser die obige Funktion!

Das obige ist der detaillierte Inhalt vonZwei Methoden zum Ausführen eines JS, nachdem die HTML-Seite geladen wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!