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

yomli 21 février 2010

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.

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>.

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.

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.