Unveil.js : un « lazyload » sur vos images!

Unveil.js

Pour ceux qui s’intéressent à la rapidité de chargement de leurs pages, invariablement, nous sommes tous confronté au poids qu’on nos images. C’est à ce moment que Unveil.js peut vous venir en aide.

Pourquoi Unveil.js

Mais est-il impératif que ces images soient chargées en même temps que la page, par exemple une image qui est en dehors du champs de vision (viewport) lors du chargement? À ce moment, on peut penser à appliquer la technique « lazyload ». Cette technique fait en sorte que l’image sera chargée sur la page seulement au moment ou elle apparaitra dans le viewport. Avant celà, elle sera remplacée par un placeholder. Ensuite, est qu’on utilise jQuery sur notre page. Oui? À ce moment-là, nous devenons les candidats idéals à utiliser Unveil.js.

Unveil.js est un script très léger (moins d’1kb, quand même!) qui permet justement d’appliquer LazyLoad sur vos images afin d’accélérer le chargement de vos page. Pour connaitre la façon de l’utiliser et ou pour en savoir plus sur ce plugin jQuery, visitez la page officiel d’Unveil.js :

http://luis-almeida.github.io/unveil/

Mais attention! Si vous n’utilisez pas jQuery sur votre page, ne chargez pas votre page plus qu’il n’en faut pour rien. Oui, c’est un préalable pour charger Unveil.js mais admettons que vous n’ayez pas jQuery, il y a d’autres alternatives telles que :

http://kaizau.github.io/Lazy-Load-Images-without-jQuery/

… qui feront en sorte que votre page sera légère, rapide de chargement et surtout, qui ne sera pas encombrée par jQuery pour les fonctions d’un simple plugin. Chaque version du code est bien expliquée sur le site de son auteur respectif, je vous souhaite donc une bonne découverte du principe « lazyload ».

Bon codage!

 

Ma découverte d’Infinite-Scroll

Infinite-Scroll est un plugin jQuery que Paul Irish a développé il y a déjà quelques années. J’en avais déjà entendu parlé mais je n’avais jamais eu la chance de travailler sur un projet web qui me permettait de le mettre en pratique… jusqu’à hier.

On a un nouveau projet de site au bureau. On veut sortir des sentiers battus et, j’en suis certain, ce projet va remplir cette mission. Je ne peux pas vous en dire beaucoup plus pour le moment sur ce projet mais je peux vous dire que je vais utiliser Infinite-Scroll dans ce dernier.

Pour des raisons de confidentialité et aussi de contenu adulte, je ne suis pas en mesure vous montrer de quelle manière je vais utiliser Infinite-Scroll sur notre projet, MAIS j’ai créé un exemple sur GitHub afin de m’amuser un peu avec le plugin ainsi que vous donner un bon exemple des possibilités de Infinite-Scroll.

Pour utiliser mon exemple : téléchargez le projet; installez le sur votre MAMP, LAMP ou WAMP (dépendant de votre système d’exploitation, en fait); importez le fichier SQL dans votre version de MySQL; puis éditez le fichier index.php pour y insérer vos informations de connexion.

Et voilà, vous avez maintenant, si vous garnissez un peu la base de données, une page qui vous listera une collection de disques à l’infini! Pour le moment, les options de listage ne sont pas fonctionnelles mais je compte bien continuer à développer ce petit projet on the side.

Pour voir la page Github du projet : https://github.com/davidberard/Disks-Sorting–an-Infinite-Scroll-Exemple

Codecademy : Pour en apprendre plus sur les interwebz

Ce soir, en naviguant sur Google+, je suis tombé par hazard sur ce site merveilleux. Des exemples clairs et concis pour ceux qui désirent en apprendre un peu plus sur HTML, CSS, PHP, Ruby, Javascript, etc. Un système de récompenses par badges aide les grosses faignasses comme moi à continuer et passer au travers. 🙂

C’est ma trouvaille de la semaine, gâtez-vous! http://www.codecademy.com/