Enquire.js, créer des évènements en fonction de la taille de l’écran


Enquire.js est une bibliothèque JS qui permet de gérer ses media queries en Javascript. Equire.js permet notamment de créer des évènements en fonction de la taille de l’écran, pour ainsi complètement adapter l’affichage ou le comportement des pages selon le terminal.

Ce petit script de moins d’un Ko peut rendre de fiers services. Certains exemples d’utilisations sont l’affichage d’image plus petite si le terminal est un mobile, inclure un script supplémentaire sur desktop, … Pratique aussi pour gérer les medias queries sur les vieux navigateurs.

enquire.register("screen and (max-width:1000px)", {

    match : function() {},      // REQUIRED
                                // Triggered when the media query transitions 
                                // *from an unmatched state to a matched state*

    unmatch : function() {},    // OPTIONAL
                                // If supplied, triggered when the media query transitions 
                                // *from a matched state to an unmatched state*.

    setup : function() {},      // OPTIONAL
                                // If supplied, a one-time setup function 
                                // triggered when the handler is first registered.                           

    deferSetup : true,          // OPTIONAL, defaults to false
                                // If set to true, defers execution the setup function until
                                // the media query is first matched. Setup is still triggered just once.

    destroy : function() {}     //OPTIONAL
                                // If supplied, triggered when a hander is unregistered (covered later). 
                                // Enables you to provide lifecycle to responsive widgets. 
                                // Put cleanup logic here.

}).listen(); // More on this next

Une idée qui me vient comme ça, serait d’utiliser ce script pour définir une taille d’image grâce à un attribut data-size d’une balise &lt:img> et de lancer le chargement de ces images de manière asynchrone. Idéal pour le RWD, enfin je pense. Je me demande justre ce que cela donne en reflow.

Téléchargez Enquire.js