Le Blog

Le blog laboratoire de F.L.D. Studio
0

Un point c'est tout

Un point c'est tout

Dans sa  première version  le plugin  jQuery LazyLoad  utilisais une image gif de 1x1 pixel en lieu et place de l'image à afficher en temps différé. Par défaut de couleur grise il étais simple de modifier cette image par défaut et d'en créer une autre d'une couleur plus approprié au thème du site.

A présent c'est toujours une image de 1x1 pixel, toujours grise mais cette fois directement embarquée dans le script au format d'encodage Base 64. C'est parfait pour l'optimisation du nombre de requêtes HTTP mais cela demande beaucoup de manipulations pour la changer. En effet il faut par exemple, créer une image de 1x1 pixel, la sauvegarder, lancer son navigateur, se rendre sur un service d'encodage, uploader l'image, l'encoder et enfin récupérer le code avant de le coller en lieu et place du point gris par défaut. Les plus consciencieux d'entre nous supprimerons aussi le fichier image source devenu inutile.

imgMake

Cet utilitaire répond à cette problématique de manipulations fastidieuses. Pas besoin de créer une image, il s'en charge, pas besoin de la supprimer, elle est virtuelle.

Interface de imgMake

Interface du générateur de code Base 64

Il ne fait que chose, créer une image de 1x1 pixel (1 point) de la couleur de son choix, il l'encode en Base 64 et nous retourne le résultat. Ne reste plus qu'a copier la chaîne fournie et à la placer dans le plugin LazyLoad . Pour cela, saisir la couleur en valeur HEXA ou utiliser le color picker ( les deux champs sont shynchronisés ), cliquer sur le bouton Générer et recopier l'encodage du point dans le pluging LazyLoad.

Remplacer le code dans LaeyLoad

Emplacement de la chaine à remplacer dans le plugin LazyLoad

A noter

Il s'agit d'un script HTML/CSS/JavaScript autonome. Nul besoin de serveur PHP ou autre pour le faire fonctionner. Download

Crédits :

  • http://formfactor.io/
  • https://github.com/amussey/hex-to-rgb.js
  • http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/

LazyLoad :

Utilitaires d'encodage Base 64 en ligne :

Glisser déposer

Autres

A savoir :

Il est tout à fait possible en PHP d'encoder une image ou tout autre chose à la volée :

<?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>

Catégories: Développement WEB

Tags: Utilitaire pour intégrateur

Commentaires: Pas de commentaires

Envoyer un commentaire