Javascript Girl
  1. Javascript Girl
  3. Que garantit exactement le ($) $ (document)?
Intereting Posts
En HTML, avec Javascript, créez-vous un nouveau bouton radio et son texte? L'audio HTML5 ne fonctionne pas dans ie7 ou ie8 Le flèche de filtrage HTML5 a été déclenchée lorsque survolent un élément enfant Intégration de script Java Paypal Empêchez la page parent de défiler lorsque la souris est sur iframe intégrée dans Firefox Comment puis-je contrôler le z-index des objets de toile? Changer l'image en fonction du menu déroulant à l'aide de javascript. Appeler une fonction javascript dans un autre fichier js Est-ce que le retour arrête une boucle? Comment ouvrir une application si elle est installée via une page Web dans Safari? Comment mesurer les millisecondes entre mousedown et mouseup? Comment puis-je obtenir la progression d'un téléchargement <script>? Comment enregistrer un fichier au côté du client en utilisant JavaScript? {{$ Index}} de ng-repeat calculé après la fonction de liaison de la directive angulaire. $ Compilez-le? JQuery effectue une autocomplète et forme une population à l'aide de JSON

Que garantit exactement le ($) $ (document)?

En exécutant mon application (plutôt complexe) JavaScript / jQuery dans le navigateur Chrome de Google, il semblerait que $(document).ready déclenche alors que certains fichiers JavaScript n'ont pas encore été chargés.

Le code pertinent (simplifié):

Dans mon fichier HTML 

 <script>var httpRoot='../../../';var verifyLoad = {};</script> <script src="../../../globalvars.js"></script> <script src="../../../storagekeys.js"></script> <script src="../../../geometry.js"></script> <script src="../../../md5.js"></script> <script src="../../../serialize.js"></script> ... <script src="../../../main.js"></script>

Comme dernière déclaration de chacun des fichiers .js sauf main.js: 

 verifyLoad.FOO = true; // where FOO is a property specific to the file

par exemple 

 verifyLoad.jquerySupplements = true; verifyLoad.serialize = true;

Dans main.js: 

 $(document).ready(function() { function verifyLoadTest (scriptFileName, token) { if (!verifyLoad.hasOwnProperty(token)) { console.log(scriptFileName + ' not properly loaded'); }; }; verifyLoadTest('globalvars.js', 'globalvars'); verifyLoadTest('storagekeys.js', 'storagekeys'); verifyLoadTest('geometry.js', 'geometry'); verifyLoadTest('md5.js', 'geometry'); verifyLoadTest('serialize.js', 'serialize'); ... }

Beaucoup pour mon étonnement, je vois certains de ces déclencheurs. Cela ne correspond pas à ma compréhension de $(document).ready . Qu'est-ce qui me manque?

L'événement prêt du document est déclenché lorsque le navigateur a analysé le fichier HTML du début à la fin et l'a converti en une structure DOM. Il ne garantit en aucune façon que d'autres ressources (par exemple, les feuilles de style, les images ou, comme dans ce cas, les scripts) auront été chargées. Il se réfère uniquement à la structure DOM, et est déclenché indépendamment de l'état de chargement des ressources de la page.

Si vous souhaitez attendre des ressources à charger, utilisez l'événement de load la window , qui est déclenché uniquement lorsque chaque élément de la page a fini de charger.

Voir:

  • .load
  • .ready