Quel événement déclenche la fonction $function() de JQuery ?

Question

Nous avons un JQuery $(function() déclaration en tant que :

<script type="text/javascript">
$(function(){
  //Code..
})
</script>

Question bête - quand exactement cette fonction est-elle exécutée ? Est-ce que c'est quand la page HTML entière a été téléchargée par le client ?

Quel est l'avantage d'utiliser l'enveloppe de votre code à l'intérieur de $(function() plutôt que de simplement faire :

<script type="text/javascript">
//Code..
</script>

Answer 1

Elle se déclenche lorsque le document a été analysé et est prêt, et est l'équivalent de $(document).ready(function () { }) .

L'avantage évident est que le fait d'avoir votre balise script avant les autres éléments de la page signifie que votre script peut interagir avec eux même s'ils ne sont pas disponibles au moment de l'analyse syntaxique. Si vous exécutez votre script avant que les éléments aient été analysés et que le document ne soit pas prêt, ils ne seront pas disponibles pour l'interaction.

Answer 2

Il est exécuté dès que le DOM est analysé et est invoqué dans l'ordre d'apparition s'il y a plusieurs apparitions. A ce stade, le document n'est pas encore affiché, il est juste analysé.

Answer 3

Lorsque le chargement du document est terminé. C'est la même chose que d'écrire ceci :

$(document).ready(function(){});

EDIT : Pour répondre à votre deuxième question :

Si vous n'encapsulez pas votre code dans le bloc ci-dessus, il se déclenchera dès qu'il sera rencontré, et non après le chargement de tous les contrôles de la page. Ainsi, si un bloc se trouve en haut d'une page et qu'il fait référence à des éléments de la page, ces références ne fonctionneront pas car les éléments ne sont pas encore chargés.

Mais si vous enroulez le bloc, vous savez que la page a été chargée et que tous les éléments sont disponibles pour être référencés.

Answer 4

Il se déclenche après le chargement complet du document, l'initialisation de l'arbre DOM, l'application de tous les styles CSS et l'exécution de tout le Javascript. Il diffère de la méthode load en ce sens que les éléments (autres que CSS/JS) qui chargent leur contenu à partir d'autres URL, comme les images ou les fichiers flash, n'ont pas nécessairement fini de se charger à ce stade. Cet événement est généralement appelé "domready" ou "domloaded". Certains navigateurs modernes le prennent en charge directement (par exemple, Firefox dispose d'un événement DomContentLoaded), tandis que d'autres peuvent le simuler à l'aide de diverses astuces, comme l'utilisation de l'attribut defer ou en plaçant un script à la toute fin du corps.

L'avantage est que vous pouvez interagir de manière fiable avec le document à ce moment-là ; par exemple, vous pouvez définir un gestionnaire d'événement sur un élément avec un certain ID et être sûr qu'il existe déjà dans l'arbre DOM. D'autre part, il peut s'exécuter considérablement plus tôt que l'événement de chargement, si une ressource externe est lente à charger. Si votre script se trouve à la fin de votre code HTML, il peut y avoir peu de différence entre l'utilisation ou non de l'événement domready, mais en général les scripts sont appelés à partir de l'élément head et à ce stade, aucun élément du corps n'est encore disponible.