Chargement de fichiers js et autres fichiers js dépendants de manière asynchrone

Je recherche un moyen propre de charger de manière asynchrone les types de fichiers javascript suivants: un fichier js "core" (hmm, on l'appelle, oh je ne sais pas, "jquery!" Haha), x nombre de js Les fichiers qui dépendent du fichier js "core" en cours de chargement et un nombre d'autres fichiers js non liés. J'ai quelques idées sur la façon de s'y prendre, mais je ne sais pas quelle est la meilleure façon. J'aimerais éviter de charger des scripts dans le corps du document.

Donc, par exemple, je veux que les 4 fichiers javascript suivants se chargent de manière asynchrone, nommément nommés:

/js/my-contact-page-js-functions.js // unrelated/independent script /js/jquery-1.3.2.min.js // the "core" script /js/jquery.color.min.js // dependent on jquery being loaded http://thirdparty.com/js/third-party-tracking-script.js // another unrelated/independent script 

Mais cela ne fonctionnera pas car il n'est pas garanti que jQuery est chargé avant le plugin de couleur …

 (function() { var a=[ '/js/my-contact-page-functions.js', '/js/jquery-1.4.2.min.js', '/js/jquery.color.js', 'http://cdn.thirdparty.com/third-party-tracking-script.js', ], d=document, h=d.getElementsByTagName('head')[0], s, i, l=a.length; for(i=0;i<l;i++){ s=d.createElement('script'); s.type='text/javascript'; s.async=true; s.src=a[i]; h.appendChild(s); } })(); 

Est-ce que ce n'est pas possible de charger jquery et le plugin de couleur de manière asynchrone? (Étant donné que le plugin de couleur nécessite que jQuery soit chargé en premier).

La première méthode que je considérais consiste à simplement combiner le script de plugin de couleur avec la source jQuery en un seul fichier.

Ensuite, une autre idée que j'ai eu était de charger le plugin de couleur de la manière suivante:

 $(window).ready(function() { $.getScript("/js/jquery.color.js"); }); 

Quelqu'un a-t-il une idée de votre façon de procéder? Merci!

    LabJS et RequireJS sont deux choix populaires en ce moment. Ils travaillent tous deux avec jQuery mais prennent des approches légèrement différentes, alors vous devriez regarder les deux.

    LABjs est spécialement conçu pour ce problème.

     <script src="lab.js"></script> <script> $LAB .script("jquery.js") .wait() .script("jquery.color.js") .script("jquery.otherplugin.js") .script("mylib.js") .wait() .script("unrelated1.js") .script("unrelated2.js"); </script> 

    Vous pouvez également mettre les scripts indépendants dans leur propre chaîne $LAB , s'ils n'ont vraiment pas besoin d'attendre jQuery et vos autres scripts.

    Vous pouvez tirer parti de YUI Loader pour enregistrer vos propres modules et dépendances , puis les charger.

    Vous obtenez des crochets complets pour la réussite, l'échec et même le progrès, de sorte que vous pouvez accrocher toute action asynchrone que vous aimez.

    Vous ne pourrez pas obtenir une charge complètement asynchrone pour la raison même que vous mentionnez; dépendance.

    Pour mes 10p, je suivrais la route $ .getScript (). Il s'agit essentiellement d'une enveloppe pour $ .ajax (), donc le chargement de vos scripts de cette façon vous donnera le chargement asynchrone que vous attendez.

    Il existe un plugin jquery en général qui charge les fichiers css et JS, asynchrones et synchronisation, voir: http://code.google.com/p/rloader/