-  cf https://contrib.spip.net/jQuery-Lazy-Load-pour-SPIP
-  cf https://zone.spip.net/trac/spip-zone/browser/spip-zone/_plugins_/lazysizes/trunk

Placeholders Méthodes

Blur-up placeholders :

image réduite de loading, produisant un effet flouté. On utilise une version réduite de l’image (ex : 10% de l’original), qui affichée dans le conteneur a la taille de l’image final, produit un effet de flou.

https://github.com/aFarkas/lazysizes#lqipblurry-image-placeholderblur-up-image-technique

Svg placeholders

Peut être mixé avec la technique d’extraction de la couleur dominante, en remplissant un svg dynamiquement, via css.

effet polygonal ou silhouette

https://jmperezperez.com/svg-placeholders/

Placeholders Placeholders “Pinterest” like - extraction de la couleur dominante

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>]