JavaScript - Comment puis-je m'assurer que 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é complètement chargée. De ce fait, mon JavaScript ne s'exécute pas correctement.

Quelles sont les meilleures pratiques pour assurer que votre bibliothèque jQuery est chargé avant l'exécution de votre code JavaScript?

Post un exemple de code

InformationsquelleAutor Villager | 2009-07-12

javascript jquery

12

La bibliothèque jQuery doit être inclus dans le <head> partie de votre page:
```
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
```
Votre propre code doit venir après. JavaScript est chargé linéairement et de manière synchrone, de sorte que vous n'avez pas à vous inquiéter à ce sujet aussi longtemps que vous incluez les scripts dans l'ordre.

Pour faire de votre code à exécuter lorsque le DOM a fini de se charger (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 êtes de mélange 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>');
});
```
- En fait c'est une mauvaise pratique à la charge de la 3e partie des bibliothèques de façon synchrone! Si vous dépendent de l'ordre dans lequel ils sont chargés, il est recommandé d'inclure le script à la fin du corps, il n'est donc pas de rendu de blocage, et est encore chargé de façon synchrone, par exemple, des scripts qui sont inclus par la suite sont exécutées après l'exécution de celui-ci.
InformationsquelleAutor Blixt
55

Il y a plusieurs réponses déjà, chacun d'entre eux de l'excellent travail mais tous dépendent de faire en sorte que jQuery est téléchargé de façon synchrone avant tout dépendances essayez de l'utiliser. Cette approche est très sûr, mais il peut également présenter une inefficacité dans que pas d'autres ressources peuvent être téléchargées/run alors que la bibliothèque jQuery script est en cours de téléchargement et analysée. Si vous mettez de jQuery dans la tête à l'aide d'une balise intégrée, les utilisateurs du navigateur sera assis inactif pendant le téléchargement et le traitement de jQuery quand il pourrait faire d'autres choses comme le téléchargement d'images, le téléchargement d'autres scripts, etc.

Si vous êtes à la recherche pour accélérer la réactivité au démarrage, chaque milliseconde compte.

D'une grande aide pour moi au cours de la dernière année a été de Steve Souders, d'abord quand il était chez Yahoo, et maintenant à Google. Si vous avez le temps, jetez un œil à son diapositives pour Encore Plus Rapide Des Sites Web et High Performance Web Sites. Excellent. Pour un plus grand paraphraser, de continuer ici.

Lors de la fixation des fichiers javascript pour les DOM, il a été constaté que le fait de mettre une ligne <script> dans la balise <head> de documenter les causes de la plupart des navigateurs à bloc alors que le fichier est téléchargé et analysée. IE8 et Chrome sont des exceptions. Pour contourner ce problème, vous pouvez créer un "script" élément par l'entremise du document.createElement, définissez les attributs appropriés, et puis le joindre à la section head du document. Cette approche ne prend pas en bloc dans tous les principaux navigateurs.
```
<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, lors du téléchargement et de l'analyse, n'est pas bloquant le téléchargement et l'analyse de toutes les autres images, des images ou des fichiers javascript. Mais cela pourrait présenter un problème si vous avez un script qui dépend de jQuery termine son avant de télécharger jQuery n'. jQuery ne sera pas là, et vous obtiendrez un message d'erreur indiquant $ ou jQuery n'est pas défini.

Donc, pour vous assurer que votre code s'exécute, vous devez faire une vérification de la dépendance. Si les 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 montré avant, ils sont tous valides et tous les travaux. Mais cette méthode permettra de s'assurer que vous ne bloque pas le téléchargement d'autres éléments de la page lors de l'attente pour jQuery.

Cette approche fonctionne pour n'importe quel fichier, donc si vous avez à 10 js fichiers, vous pouvez associer chacun d'eux à l'aide de cette méthode. Vous avez juste à vous assurer que votre fonction de contrôle vérifie pour chaque dépendance à l'avant de la course.
- Fantastique réponse, souhaite que je pourrais upvote plus! Je suis en utilisant cette technique maintenant et il fonctionne très bien. (BTW semble que vous pouvez avoir une faute de frappe avec un indésirable de l'espace dans elmScript .src et elmScript .type.)
- j'aime cette réponse. aussi résoudre mon problème dans l'anthère question publiée.
- Si $ est utilisé par une autre librairie javascript, assurez-vous de le remplacer par jQuery.
- Plutôt que d'un ensemble de timeout, j'emploie un setInterval que des boucles de toutes les 50 millisecondes (ou un certain intervalle de temps de votre choix, mais pas trop court car une requête http devez avoir assez de temps pour demander à réponse), et à l'intérieur de chaque boucle, une condition de contrôle demande si l'créées dynamiquement en fonction de script a été effectué avant l'exécution de la prochaine dynamique de création de scripts. J'avoue, cependant, que même lorsque de telles fonctions le rapport d'achèvement, j'ai encore parfois (mais très rarement) à obtenir une "JQuery pas une fonction" js erreur. Donc, je suis à la lecture de cette page :/
- Shane script s'appelle elle-même si jquery n'est pas défini, donc pas besoin de l'aide de la méthode setInterval au lieu de setTimeout.
InformationsquelleAutor Shane Tomlinson
2

Il pourrait y avoir deux problèmes. Tout d'abord, vous devez vous assurer que jQuery est inclus avant tout les scripts qui l'utilisent. Cela peut être difficile si vous avez du javascript intégré dans les partiels. Si vous chargez jQuery dans l'en-tête et tous vos autres script dans un bloc de script à la fin du corps, vous pouvez être sûr que jQuery est chargé avant votre code. J'ai essayer de mettre tout à la fin du corps, avec jQuery étant le premier script chargé.

Deuxièmement, vous devez vous assurer que le DOM est chargé complètement avant d'essayer de l'utiliser dans vos scripts. jQuery fournit un prêt méthode pour cela. Enveloppez votre code à l'intérieur de la méthode de prêt et vous pouvez être (plus) sûr que le DOM est disponible pour vous de travailler avec. Pas toutes les images peuvent être chargés, mais vous devriez être ok avec la plupart des tout le reste. Pour les images, vous pouvez avoir à prendre plus soin de faire en sorte qu'ils sont chargés si essentiel à 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...
});
```
- Je suis dans la même situation et je ne peux pas être sûr que jquery est entièrement chargé ou pas. Parce que $(document).prêt() ne fonctionne pas et je ne pouvais pas écrire du code "si jquery n'est pas chargé de le charger à nouveau". Est-il un moyen pour y parvenir?
InformationsquelleAutor tvanfosson
1

Lorsqu'un navigateur rencontre une script élément blocs, ce qui signifie que tant que vous avez un script élément de chargement de 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 L'Ordre De Chargement Des JavaScript pour un commentaire sur ce sujet.

InformationsquelleAutor Walter Rumsby
0

Placez votre code après le jquery et le faire
```
$(document).ready( { //your code } );
```
- Ce code dépend de l'existence de jQuery dans les DOM. Le DOM peut être déjà chargé, mais vous voulez charger jQuery après le fait, de manière dynamique. Si c'est le cas, votre ligne ne sera pas exécuté si la bibliothèque jQuery n'est pas chargé, et le navigateur client va juste rester là et ne rien faire. Donc, il y a certains boucle dans le script dynamique, pour vérifier l'existence de jQuery avant de passer à l'étape suivante.
InformationsquelleAutor Daniel A. White
0

En général, il suffit d'utiliser la base suivantes du document "chargé" test en jquery. Directement à partir de la les débutants jquery tutoriel:
```
 $(document).ready(function() {
   //do stuff when DOM is ready
 });
```
Je ne peux penser à aucune raison pour que cela ne devrait pas travailler, il y a certainement des millions de sites à l'aide de jquery, qui s'appuie précisément sur ce morceau de code.
- Nous utilisons parfois des scripts client que par eux-mêmes, de ne pas charger jquery. Ce sont de simples bootstrap scripts de charger un script à distance. C'est dans le script à distance où je veux charger mes bibliothèques externes, comme jQuery. Donc, je dois faire quelques dynamique DOM modification, comme l'ajout de scripts jQuery après le fait. C'est dans ces scripts distants où vous trouverez les problèmes soulevés par cette question.
InformationsquelleAutor Egil Hansen

Vous devez vous connecter pour publier un commentaire.