Head JS: Accelérez votre site grâce à 2,30kb de Javascript

Voici un script bien pratique pour tous les développeurs qui vous permettra d'accélerer le chargement de vos pages web à l'aide de 2.30kb de Javascript !

Chargeur JavaScript

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {
    // code ici
});

Head JS charge les fichiers javascript en les traitant comme des images, SANS bloquer le chargement de la page. La page est donc plus rapide, même avec un seul fichier combiné.

Organisateur JavaScript

Vous optimisez vos pages en placant les appels aux scripts JS en bas de page ? Bien. Mais pouvez-vous faire ca ?

// utiliser jQuery dans le coprs de la page, même si la librairie n'est pas encore incluse
head.ready(function() {
    $("#my").jquery_plugin();
});
 
// charge jQuery à n'importe quel endroit de votre page
head.js("/path/to/jquery.js");    

Modernisateur CSS

Head JS ajoute des classes à la racine du document html, pour que vous puissiez faire cela :

/* cible CSS pour les navigateurs ne supportant pas box-shadow */
.no-boxshadow .box {
    border: 2px solid #ddd;
}

facilitateur HTML5

Les DIV, c'est bien, mais Head JS vous permet d'être sémantique et futuriste.

<style>
   article { text-shadow:0 0 1px #ccc; }
</style>
 
<!-- works in IE too -->
<article>
   <header></header>
   <section></section>
   <footer></footer>
</article>

Détecteur de taille d'écran

Concevoir des pages pour un écran de 1980px de large et faites les fonctionner sur un écran 10" ou encore sur des téléphones mobiles.

/* screen size less than 1024 pixels */
.lt-1024 #hero { background-image:(medium.jpg); }
 
/* fine tune for mobile phone */
.lt-640 #hero { background-image:(small.jpg); }

Si vous redimensionnez votre navigateur, les règles CSS vont dynamiquement suivre. Head JS s'occupe de tout.

CSS dynamique

Styles pour divers états d'application

<script>
/* detect whether user is logged in. here we check for an existence of a cookie */
head.feature("logged", mycookielib.get_cookie("auth_token"));
</script>
 
<style>
/* .. and write CSS accordingly */
.logged #login-box { display: none; }
</style>

A chaque fois que vous appelez "head.feature()", vos règles CSS suivent.

Routeur CSS

Cible CSS pour certaines pages et chemins

/* CSS targeted for home page only */
.root-section #index-page
   
/* make sidebar visible under /plugins  */   
.plugins-section #sidebar { display: block; }

Détecteur de navigateur

Tous les navigateurs sont détectés, mais nous aimons tous IE.

/* older than IE9 */
.lt-ie9 .box { padding: 10px; }
 
/* CSS fixes for IE6 */
.ie6 ul  { list-style: none; }

Détecteur de fonction JavaScript

Chaque fonction peut être consultée dans la variable globale JavaScript HEAD.

if (head.logged) {
   // do things
}

Site Officiel