JavaScript - Comment puis-je m'assurer qu'un jQuery est chargé?

J'ai une page web. Lorsque cette page web est chargée, je veux exécuter du JavaScript. Ce JavaScript utilise JQuery. Cependant, il semble que lorsque la page est chargée, la bibliothèque jQuery n'a pas été entièrement chargée. Pour cette raison, mon JavaScript ne s'exécute pas correctement.JavaScript - Comment puis-je m'assurer qu'un jQuery est chargé?

Quelles sont les meilleures pratiques pour s'assurer que votre bibliothèque jQuery est chargée avant d'exécuter votre JavaScript?

Source

2009-07-12 Villager

Publier un exemple de code –

La bibliothèque jQuery devrait être inclus dans la partie <head> de votre page:

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

Votre propre code devrait venir après. JavaScript est chargé de manière linéaire et synchrone, donc vous n'avez pas à vous en soucier tant que vous incluez les scripts dans l'ordre.

Pour que votre code soit exécuté lorsque le DOM a terminé le chargement (parce que vous ne pouvez pas vraiment utiliser une grande partie de la bibliothèque jQuery jusqu'à ce que cela arrive), faites ceci:

$(function() { 
    // Do stuff to the DOM 
    $('body').append('<p>Hello World!</p>'); 
});

Si vous mélangez les frameworks JavaScript et ils interfèrent les uns avec les autres, vous devrez peut-être utiliser jQuery comme ceci:

jQuery(function ($) { // First argument is the jQuery object 
    // Do stuff to the DOM 
    $('body').append('<p>Hello World!</p>'); 
});

Source

2009-07-12 21:38:04 Blixt

Accepter les bibliothèques tierces de manière synchrone est une mauvaise habitude! Si vous dépendez de l'ordre dans lequel ils sont chargés, il est recommandé d'inclure le script ** à la fin du corps **, de sorte qu'il ne bloque pas le rendu et qu'il soit toujours chargé de manière synchrone, par ex. Les scripts qui sont inclus par la suite sont exécutés après l'exécution de celui-ci. – Andy

Placez votre code après la jquery et faire

$(document).ready({ // your code });

Source

2009-07-12 21:38:52

Ce code dépend de l'existence de jQuery dans le DOM. Le DOM peut déjà être chargé, mais vous voulez charger jQuery après le fait, dynamiquement. Si c'est le cas, votre ligne ne s'exécutera pas si la bibliothèque jQuery n'est pas chargée, et le navigateur client restera là sans rien faire. Donc, il doit y avoir une boucle dans le script dynamique, pour vérifier l'existence de jQuery avant de passer à l'étape suivante. – TARKUS

Il pourrait y avoir deux problèmes. D'abord, vous devez vous assurer que jQuery est inclus avant tout script qui l'utilise. Cela peut être difficile si vous avez javascript intégré dans les partiels. Si vous chargez jQuery dans l'en-tête et tous les autres scripts dans un bloc de script à la fin du corps, vous pouvez être sûr que jQuery est chargé avant votre autre code. J'essaie de tout mettre à la fin du corps, avec jQuery étant le premier script chargé. Deuxièmement, vous devez vous assurer que le DOM est entièrement chargé avant d'essayer de l'utiliser dans vos scripts. jQuery fournit une méthode prête pour cela. Enveloppez votre code dans la méthode ready et vous pouvez être (plus) sûr que le DOM est disponible pour travailler avec vous. Toutes les images ne peuvent pas être chargées, mais vous devriez être d'accord avec la plupart des autres choses. Pour les images, vous devrez peut-être prendre plus de soin pour vous assurer qu'elles sont chargées si cela est critique pour votre code.

<script type='text/javascript' src='.../path-to-jquery/jquery.js'></script> 
$(document).ready(function() { 
    ...your code here... 
});

ou (raccourci)

<script type='text/javascript' src='.../path-to-jquery/jquery.js'></script> 
$(function() { 
    ... your code here... 
});

Source

2009-07-12 21:40:12 tvanfosson

Je suis dans la même situation et je ne peux pas être sûr que jquery est entièrement chargé ou non. Parce que $ (document) .ready() ne fonctionne pas et je ne pouvais pas écrire de code "si jquery n'est pas chargé, chargez-le à nouveau". Y'a-t-il une quelconque façon de réussir cela? – uzay95

En général, il suffit d'utiliser le "document chargé" de base test suivant en jquery. Droit de la beginners jquery tutorial:

$(document).ready(function() { 
    // do stuff when DOM is ready 
});

Je peux penser à aucune raison pour laquelle cela ne devrait pas travailler, il y a certainement des millions de sites en utilisant jquery qui repose précisément sur ce morceau de code.

Source

2009-07-12 21:41:37

Parfois, nous utilisons des scripts clients qui, par eux-mêmes, ne chargent pas jquery. Ce sont des scripts bootstrap simples qui chargent un script distant.C'est dans le script distant que je veux charger mes bibliothèques externes, comme jQuery. Par conséquent, je dois faire une modification DOM dynamique, comme ajouter des scripts jQuery après le fait. C'est dans ces scripts distants que vous trouverez les problèmes abordés par cette question. – TARKUS

Lorsqu'un navigateur rencontre un élément script il bloque ce qui signifie que tant que vous avez un élément script qui charge jQuery avant un script qui veut utiliser jQuery, vous devriez être bien, par exemple

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
    // jQuery is available 

    $(document).ready(function(){ 
     // ... 
    }); 
</script>

Voir JavaScript Load Order pour d'autres commentaires sur ce sujet.

Source

2009-07-12 21:43:16

Il y a déjà plusieurs réponses, chacune d'entre elles fonctionne très bien, mais toutes dépendent de s'assurer que jQuery est téléchargé de manière synchrone avant que les dépendances ne tentent de l'utiliser. Cette approche est très sûre, mais elle peut également présenter une inefficacité en ce sens qu'aucune autre ressource ne peut être téléchargée/exécutée pendant que le script de la bibliothèque jQuery est téléchargé et analysé. Si vous mettez jQuery dans la tête en utilisant une balise intégrée, le navigateur des utilisateurs restera inactif pendant le téléchargement et le traitement de jQuery alors qu'il pourrait faire d'autres choses comme télécharger des images, télécharger d'autres scripts, etc

Si vous êtes à la recherche de réactivité rapide au démarrage, chaque milliseconde compte.

Steve Souders m'a beaucoup aidé au cours de l'année écoulée, d'abord lorsqu'il était chez Yahoo, et maintenant chez Google. Si vous avez le temps, consultez ses diapositives pour Even Faster Web Sites et High Performance Web Sites. Excellent. Pour une énorme paraphrase, continuez ici.

Lors de la fixation des fichiers javascript au DOM, il a été constaté que mettre un tag script en ligne < > dans la tête < > du document provoque la plupart des navigateurs pour bloquer tout ce fichier est en cours de téléchargement et analysé. IE8 et Chrome sont des exceptions. Pour contourner ce problème, vous pouvez créer un élément "script" via document.createElement, définir les attributs appropriés, puis l'attacher à la tête du document. Cette approche ne bloque dans aucun navigateur majeur.

<script type='text/javascript'> 
    // Attaching jQuery the non-blocking way. 
    var elmScript = document.createElement('script'); 
    elmScript .src = 'jQuery.js'; // change file to your jQuery library 
    elmScript .type = 'text/javascript';   
    document.getElementsByTagName('head')[0].appendChild(elmScript); 
</script>

Cela garantit que jQuery, pendant le téléchargement et l'analyse syntaxique, ne bloque pas le téléchargement et l'analyse de toutes les autres images ou fichiers javascript. Mais cela pourrait poser un problème si vous avez un script qui dépend de la fin de jQuery avant jQuery. jQuery ne sera pas là et vous obtiendrez une erreur indiquant $ ou jQuery n'est pas défini. Donc, pour vous assurer que votre code va s'exécuter, vous devez faire quelques vérifications de dépendances. Si vos dépendances ne sont pas satisfaites, attendez un peu et réessayez.

<script type='text/javascript'> 
runScript(); 

function runScript() { 
    // Script that does something and depends on jQuery being there. 
    if(window.$) { 
     // do your action that depends on jQuery. 
    } else { 
     // wait 50 milliseconds and try again. 
     window.setTimeout(runScript, 50); 
    } 
} 
</script>

Comme je l'ai dit plus tôt, il n'y a pas de problèmes avec les approches présentées précédemment, elles sont toutes valables et fonctionnent toutes. Mais cette méthode garantit que vous ne bloquez pas le téléchargement d'autres éléments sur la page en attendant jQuery.

Cette approche fonctionnera pour n'importe quel fichier, donc si vous devez inclure 10 fichiers js, vous pouvez attacher chacun d'entre eux en utilisant cette méthode. Vous devez juste vous assurer que votre fonction de vérification vérifie chaque dépendance avant de s'exécuter.

Source

2009-07-14 12:44:56

Réponse fantastique, j'aurais aimé pouvoir l'emporter davantage! J'utilise cette technique maintenant et ça marche très bien. (BTW semble avoir une faute de frappe avec un espace indésirable dans 'elmScript .src' et' elmScript .type'.) –

J'aime cette réponse. résoudre aussi mon problème dans une autre question postée. – murvinlai

Si '$' est utilisé par une autre bibliothèque javascript, assurez-vous de le remplacer par 'jQuery'. – lordcheeto

JavaScript - Comment puis-je m'assurer qu'un jQuery est chargé?

Répondre

Questions connexes