So führen Sie JQuery beim Öffnen der Seite aus

Bei der Verwendung von jQuery für die Webentwicklung ist es manchmal erforderlich, bestimmte Vorgänge nach dem Laden der Seite automatisch auszuführen, z. B. das Festlegen des anfänglichen Anzeigeeffekts, das Anzeigen spezieller Eingabeaufforderungsinformationen usw. Wie implementiert man diese Funktion? In diesem Artikel erfahren Sie, wie Sie jQuery beim Öffnen der Seite ausführen lassen.

1. Verwenden Sie die Funktion $(document).ready() von jQuery.

Die Verwendung der Funktion $(document).ready() von jQuery ist die am häufigsten verwendete Methode Der Code in der Rückruffunktion, der beim Laden des DOM ausgeführt werden soll. Das Codebeispiel lautet wie folgt:

$(document).ready(function() {
  //执行的代码
});

Wie im obigen Code gezeigt, ist der in der Funktion $(document).ready() übergebene Parameter eine Funktion, die nach dem Laden des DOM ausgeführt wird . Innerhalb dieser Funktion können Sie den jQuery-Code schreiben, der ausgeführt werden muss.

2. Verwenden Sie die window.onload()-Funktion von jQuery.

Die window.onload()-Funktion von jQuery lädt alle Ressourcen auf der Seite (einschließlich Bilder, Stylesheets usw.) wird ausgeführt. Im Vergleich zur Funktion $(document).ready() enthält die Funktion window.onload() umfangreichere Inhalte, sodass die Ausführungszeit relativ länger ist. Das Codebeispiel lautet wie folgt:

$(window).on('load', function() {
  //执行的代码
});

Im Gegensatz zur Funktion $(document).ready() wird der Code der Funktion window.onload() erst ausgeführt, wenn alle Ressourcen geladen sind. Daher können Sie hier auch Code schreiben, der warten muss, bis die Ressource geladen ist, bevor sie ausgeführt werden kann.

3. Verwenden Sie die Sofortaufruffunktion

Zusätzlich zu den beiden oben genannten Methoden können Sie auch die Sofortaufruffunktion verwenden, um den Code nach dem Laden der Seite automatisch auszuführen. Das sofortige Aufrufen einer Funktion bedeutet, den Funktionskörper in Klammern zu kapseln und schließlich eine weitere Klammer hinzuzufügen, um die Funktion auszuführen. Das Codebeispiel lautet wie folgt:

(function() {
  //执行的代码
})();

Wie im obigen Code gezeigt, entspricht $(function(){}) in diesem Code $(document).ready(function(){}) . Wenn der Codeinhalt klein ist, können Sie ihn zur Ausführung in eine anonyme Funktion kapseln.

4. Verwenden Sie das Defer-Attribut

Wenn Sie externe JavaScript-Ressourcen in die Seite einfügen, können Sie den Browser mit dem Defer-Attribut anweisen, mit dem Rendern der Seite fortzufahren und auf das zu warten JavaScript muss vor der Ausführung geladen werden. Zum Beispiel der folgende Code:

<script src="xxxx.js" defer></script>

Im obigen Code hat der Lade-, Analyse- und Ausführungsprozess der externen Ressource xxxx.js keinen Einfluss auf das Rendern der Seite. Wenn das JavaScript geladen ist, wartet es auf die Ausführung der Parsing-Warteschlange, bis die Codeausführung des Skripts abgeschlossen ist.

5. Verwenden Sie das Async-Attribut

Anders als das Defer-Attribut gibt das Async-Attribut an, dass das Skript sofort heruntergeladen und ausgeführt werden soll, aber während das Skript ausgeführt wird, Das Parsen des Dokuments wird nicht beendet. Es wartet auch nicht darauf, dass andere Skripte geladen und ausgeführt werden. Wenn die Netzwerkgeschwindigkeit langsam ist und das Herunterladen und Analysieren des Skripts einige Zeit in Anspruch nimmt, kann es sein, dass die Ausführung des Skripts beginnt, bevor einige Elemente der Seite geladen sind. Die Verwendung ist wie folgt:

<script src="xxxx.js" async></script>

Die oben genannten sind die fünf Methoden, mit denen jQuery beim Öffnen der Seite ausgeführt werden kann, darunter die Funktion $(document).ready() und die Funktion zum sofortigen Aufruf die am häufigsten verwendeten Methoden. Im tatsächlichen Einsatz können je nach Bedarf unterschiedliche Methoden ausgewählt werden.

Das obige ist der detaillierte Inhalt vonSo führen Sie JQuery beim Öffnen der Seite aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!