Geeek - Le blog Geek & High-tech

Vous n'aimez pas placer des inclusions de scripts JavaScript dans les footer de vos pages HTML ?
Vous trouvez que ce n'est pas leur place et que cela complexifie la compréhension de la page ?
Voici une alternative pour charger vos librairies JavaScript de manière asynchrone depuis le header de vos documents HTML.
Cependant quand vous placez ces scripts dans le header de vos pages, votre site est lent car les fichiers Javascript sont chargés avant le reste de la page.

Voici une alternative qui se base sur la librairie Modernizr et qui permet de réaliser des chargements asynchrones de ressources sur tous les navigateurs du marché.
Elle est simple à utiliser et fournit un mécanisme de callback pour permettre des traitements alternatifs en cas d'échec de chargement d'une des librairies.



<!-- Modernizr -->
<script src="https://monsite.com/modernizr.min.js"></script>

<script type="text/javascript">
Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js',

    complete: function () {
      if ( !window.jQuery ) {

            // La librairie n'a pas C)tC) chargC)e depuis le CDN, alors on la charge en locale
            Modernizr.load('https://monsite.com/jquery.min.js');
      }
    }
  },
  'https://monsite.com/script1.js',
  'https://monsite.com/script2.js'
]);
</script>

```/

Pour les plus téméraires, les puristes du HTML5, vous pouvez utiliser le nouvel attribut "async" sur les tags "script". Cet attribut permet d'indiquer au navigateur de charger la ressource JavaScript de manière asynchrone. 

Celui-ci est cependant seulement supporté par [les navigateurs les plus récents](https://caniuse.com/#feat=script-async).

```xml

<script async src="monscript.js"></script>


Vous êtes correctement abonné à Geeek
Bienvenue ! Vous êtes correctement connecté.
Parfait ! Vous êtes correctement inscrit.
Votre lien a expiré
Vérifiez vos emails et utiliser le lien magique pour vous connecter à ce site