Comment faire exécuter jquery lors de l'ouverture de la page

Lors de l'utilisation de jQuery pour le développement Web, il est parfois nécessaire d'effectuer automatiquement certaines opérations après le chargement de la page, telles que la définition de l'effet d'affichage initial, l'affichage d'informations d'invite spéciales, etc. Alors comment implémenter cette fonction ? Cet article explique comment exécuter jQuery lorsque la page est ouverte.

1. Utilisez la fonction $(document).ready() de jQuery

L'utilisation de la fonction $(document).ready() de jQuery est la méthode la plus couramment utilisée. Cette fonction demande à la fonction de rappel d'être exécutée lorsque le DOM est chargé. coder dans . L'exemple de code est le suivant :

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

Comme le montre le code ci-dessus, le paramètre passé dans la fonction $(document).ready() est une fonction qui sera exécutée après le chargement du DOM. Dans cette fonction, vous pouvez écrire le code jQuery qui doit être exécuté.

2. Utilisez la fonction window.onload() de jQuery

La fonction window.onload() de jQuery ne sera pas exécutée tant que toutes les ressources de la page (y compris les images, les feuilles de style, etc.) ne seront pas chargées. Par rapport à la fonction $(document).ready(), la fonction window.onload() contient un contenu plus étendu, le temps d'exécution sera donc relativement plus long. L'exemple de code est le suivant :

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

Contrairement à la fonction $(document).ready(), le code de la fonction window.onload() ne sera exécuté que lorsque toutes les ressources seront chargées. Par conséquent, vous pouvez également écrire ici du code qui doit attendre que la ressource soit chargée avant de pouvoir être exécutée.

3. Utiliser les fonctions d'appel immédiat

En plus des deux méthodes ci-dessus, vous pouvez également utiliser des fonctions d'appel immédiat pour exécuter automatiquement du code une fois la page chargée. Appeler une fonction immédiatement signifie encapsuler le corps de la fonction entre parenthèses, et enfin ajouter une autre parenthèse pour exécuter la fonction. L'exemple de code est le suivant :

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

Comme indiqué dans le code ci-dessus, $(function(){}) dans ce code est équivalent à $(document).ready(function(){}). Lorsque le contenu du code est petit, vous pouvez utiliser la méthode consistant à l'encapsuler dans une fonction anonyme pour l'exécution.

4. Utilisez l'attribut defer

Lors de l'introduction de ressources JavaScript externes dans la page, vous pouvez utiliser l'attribut defer pour indiquer au navigateur de continuer à afficher la page et d'attendre que le JavaScript soit chargé avant de s'exécuter. Par exemple, le code suivant :

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

Dans le code ci-dessus, le processus de chargement, d'analyse et d'exécution de la ressource externe xxxx.js n'affectera pas le rendu de la page. Lorsque le JavaScript est chargé, il attendra que la file d'attente d'analyse soit exécutée jusqu'à ce que l'exécution du code du script soit terminée.

5. Utilisez l'attribut async

Différent de l'attribut defer, l'attribut async indique que le script doit être téléchargé et exécuté immédiatement, mais lors de l'exécution du script, il n'arrêtera pas d'analyser le document et n'attendra pas d'autres scripts à charger et à exécuter. Lorsque la vitesse du réseau est lente et que le téléchargement et l'analyse du script prennent du temps, l'exécution du script peut démarrer avant la fin du chargement de certains éléments de la page. L'utilisation est la suivante :

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

Voici les cinq méthodes ci-dessus permettant d'exécuter jQuery lors de l'ouverture de la page. Parmi elles, la fonction $(document).ready() et l'appel immédiat de la fonction sont les méthodes les plus couramment utilisées. . En utilisation réelle, différentes méthodes peuvent être sélectionnées en fonction des besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!