2. Cékoidon ?
• Chargeur asynchrone pour jQuery
• Permettre le chargement non-bloquant de jQuery&plugin
• Prendre en charge les <script> inline dans la page
jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery
lundi 4 novembre 13
3. jQl n’est pas grand…
• Si pour charger du javascript sans bloquer le reste il faut d’abord
charger le chargeur en bloquant tout… on a tout perdu
• 1.7ko minifié, ~700 octets minifié+gzip
• Permet de l’inclure au début du <head> de chaque page
avant les appels de CSS externes (http://www.stevesouders.com/blog/
2009/05/06/positioning-inline-scripts/)
jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery
lundi 4 novembre 13
4. mais il est vaillant !
• Chargement de jQuery
• Chargement de jQuery depuis un CDN
• Chargement de jQuery + appel d’une callback après chargement
•
jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery
lundi 4 novembre 13
5. jQl est petit mais il peut beaucoup !
• Chargement de jQuery + plugins en parallèle
• Chargement parallèle de jQuery et des plugins
• Lancement de jQuery
• Lancement des plugins, dans leur ordre d’arrivée (et non d’appel)
• Pas de gestion complexe de dépendance
jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery
lundi 4 novembre 13
6. jQl nous libère avec un tour de sorcière
• Le principal problème du chargement asynchrone :
• les <script>…</script> inline dans la page qui utilisent jQuery et
plugins
• avec un CMS ou un framework, la page est composée de morceaux
provenant de différents modules
Souvent compliqué de modifier tous les appels de <script>
• La magie de jQl : intercepte et met en attente
• tous les appels à jQuery(document).ready() (et variantes)
• tous les appels à jQuery.getScript()
jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery
lundi 4 novembre 13
7. jQl est notre ami
• Intercepte et met en attente jQuery(function(){})
• La fonction sera lancée lorsque jQuery est chargé ET le DOM ready
• Variantes :
• $(function(){})
• jQuery().ready(function(){})
• $().ready(function(){})
jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery
lundi 4 novembre 13
8. jQl est notre ami
• Intercepte et met en attente jQuery.getScript(‘’,function(){})
• le chargement du script sera lancé après que jQuery soit chargé et
initialisé
jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery
lundi 4 novembre 13
9. La chronologie
• Chargement
• Charge jQuery (DOM injection) et les plugins en parallèle (xhr)
• Dès que jQuery est chargé
• initialise les plugins finis de chargé, dans l’ordre d’arrivée /!
• lance les appels jQuery.getScript() mis en attente
• relance les jQuery().ready() en attente
• appelle la fonction de callback
jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery
lundi 4 novembre 13
10. En résumé
• Bien adapté au chargement d’1 script monobloc minifié+concaténé
contenant jQuery+plugins
• Chargement parallèle des plugins assez simpliste
• alternativement utiliser getScript() mais le chargement démarre plus
tard
• Permet un HTML unique avec scripts inline qui fonctionne aussi bien en
synchrone qu’en asynchrone
• il faut parfois encapsuler dans un jQuery(function(){}) pour ne pas
casser
• il faudrait un jQuery().asap(function(){})
jQl - 4/11/2013 - Chargeur Asynchrone pour jQuery
lundi 4 novembre 13