modernizr.png

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 été chargée depuis le CDN, alors on la charge en locale
            Modernizr.load('http://monsite.com/jquery.min.js');
      }
    }
  },
  'http://monsite.com/script1.js',
  'http://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.

<script async src="monscript.js"></script>
1. Le , 13:43 par ABL
b98964d61f10a3f5b5a3942394053b98

Utiliser un js pour appeler d'autres js, je sais pas si on est gagnant dans l'équation. On peut async modernizr ?

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.