Carnet Wiki

Version 4 — Octobre 2018 JLuc

- cf https://contrib.spip.net/jQuery-Lazy-Load-pour-SPIP

Placeholders “Pinterest” like

Habituellement sur un markup standard en lazyloading, pour ne pas avoir une erreur de validation on remplace le src par une image transparente encodé en base64.

L’idée est pour ne pas laisser un bloc vide, pendant le chargement de l’image en cas de bande passante dégradé :
-  d’extraire la couleur dominante en se basant de préférence sur le point de focus (grace a centre_image)
-  de créer une image png de cette couleur
-  de récupérer la src au format base64.
et d’utiliser cette resource pour faire patienter l’utilisateur quelques dixièmes de seconde.

<BOUCLE_thumbnail(DOCUMENTS){id_produit}{extension==jpg|png|gif}{mode=document}{0,1}{par rang_lien}>
  #SET{thumbnail, #FICHIER|image_reduire{600,0}|extraire_attribut{src}}
  #SET{img_color, #GET{thumbnail}|image_recadre{300,300,'focus'}|couleur_extraire}     		
  [(#SET{tmp,#CHEMIN{rien.gif}|image_aplatir{gif,#GET{img_color}}|image_reduire{5,5}|extraire_attribut{src}|supprimer_timestamp})]
  [(#SET{placeholder,#CHEMIN{#GET{tmp}}|balise_img|embarque_src|extraire_attribut{src}})]
</BOUCLE_thumbnail>
[<img src="#GET{placeholder}"
      data-src="(#GET{thumbnail})"
      class="lazyload"[ alt="(#TITRE|sinon{#GET{link_title}}|attribut_html|couper{80})"]/>]
[<noscript>
  <img src="(#GET{thumbnail})"[ alt="(#TITRE|sinon{#GET{link_title}}|attribut_html|couper{80})"] />
</noscript>]