web-dev-qa-db-fra.com

Sur quel événement JQuery $ function () se déclenche-t-il?

Nous avons une instruction JQuery $(function() comme:

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

Question stupide - quand exactement cette fonction est-elle exécutée? Est-ce lorsque la page HTML entière a été téléchargée par le client?

Quel est l'avantage d'utiliser l'encapsulation de votre code dans $(function() par rapport à simplement faire:

<script type="text/javascript">
//Code..
</script>
javascriptjqueryfunction
40
Marcus Leon

Il est exécuté dès que le DOM est analysé et est invoqué par ordre d'apparition s'il y a plusieurs apparences. À ce stade, le document n'est cependant pas affiché, il est juste analysé.

18
Nrj

Il 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 de 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. 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.

31
Andy E

Une fois le chargement du document 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éclencherait dès qu'il serait rencontré plutôt qu'après le chargement de tous les contrôles de la page. Donc, si un bloc était en haut d'une page et qu'il faisait référence à des éléments de la page, ces références ne fonctionneraient pas car les éléments n'ont pas encore été chargés.

Mais si vous encapsulez le bloc, vous savez que la page a été chargée et que tous les éléments sont maintenant disponibles pour référence.

5
spinon

Il se déclenche une fois le document entièrement chargé, l'arborescence DOM a été initialisée, tous les styles CSS ont été appliqués et tout le Javascript a été exécuté. Il diffère de l'événement load en ce que les éléments (autres que CSS/JS) qui chargent leur contenu à partir d'autres URL, tels que des images ou des fichiers flash, n'ont pas nécessairement terminé le chargement à ce stade. Ceci est généralement appelé l'événement "domready" ou "domloaded", et certains navigateurs modernes le prennent en charge directement (par exemple, Firefox a un événement DomContentLoaded), et sur d'autres, il peut être simulé avec diverses astuces, comme l'utilisation de defer attribuer ou placer un script à la toute fin du corps.

L'avantage est que vous pouvez interagir de manière fiable avec le document à ce stade; par exemple, vous pouvez définir un gestionnaire d'événements sur un élément avec un certain ID et être sûr qu'il existe déjà dans l'arborescence DOM. En revanche, il peut s'exécuter considérablement plus tôt que l'événement de chargement, si certaines ressources externes sont lentes à charger. Si votre script se trouve à la fin de votre code HTML, il peut y avoir peu de différence dans l'utilisation ou non de l'événement domready, mais généralement les scripts sont appelés à partir de la balise head et, à ce stade, aucun élément du corps sont encore disponibles.

3
Tgr