Chargement dynamique d'un Javascript en fonction de l'existence d'une classe dans le DOM

L'idée est d'utiliser un peu de Javascript pour charger un script seulement *et seulement si* un élément du DOM possède un *class name* défini. Je l'utilise sur le portfolio pour charger la librairie jQuery et le script utilisés pour la galerie. Cela permet de gagner en temps d'exécution en ne téléchargeant que les scripts nécessaires à l'exécution de la page.

Nous commençons par créer une fonction qui vérifie que le *class name* se situe bien dans le DOM. Elle retourne *true* dans ce cas, *false* dans l'autre.

Notez que le paramètre *tag* est optionnel mais permet une plus grande rapidité d'exécution.

lang-javascript

function isAnyClassOutThere(class,tag){
   // On transforme le string passé en paramètre en une expression régulière
   //(sans cela, test() ne retournera rien)
   var regExpClass = new RegExp(class);

   // S'il n'y avait pas de tag passé en paramètre, on considère que l'on regarde
   // tous les tags
   var tag = tag || "all";
   var elm = (tag == "all") ? document.all : document.getElementsByTagName(tag);
   
   var result = false;

   // Pour chaque élément que l'on a récupéré dans elm
   for(var i=0; i < elm.length; i++){
      
      // On test la correspondance
      if(regExpClass.test(elm[i].className)){
         result = true;
         
         // On sort de la boucle (pas très joli, mais évite de faire un return 
         // dans une boucle)
         i+=elm.length;
       }
   }

return result;
}

Nous continuons avec une petite fonction fort simple qui ajoute une balise `<script>` au `<head>`.

lang-javascript

function loadJS(url){
   // On crée un élément script
   var elm=document.createElement("script");

   // On lui attribue une url
   elm.setAttribute("src", url);

   // On renseigne le type
   elm.setAttribute("type", "text/javascript");

   // Enfin, on l'ajoute en temps qu'enfant de l'élément head
   document.getElementsByTagName("head")[0].appendChild(elm);
}

Enfin, on ajoute dans le `<head>` de la page une condition qui appelle la fonction `isAnyClassOutThere()`, vérifiant la présence de l'élément avant de lancer le chargement des scripts.

lang-javascript

window.onload=function(){
   if(isAnyClassOutThere("galerie", "ul")){
      loadJS("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
      loadJS("./gallery.js");
   }
}

À noter que cette méthode peut aussi être utilisée avec le chargement de feuilles de style CSS, mais dans ce cas le Javascript n'est plus non-intrusif et perd donc beaucoup de son charme.

----

Permaliens :