Comment animer les images chargées par le LazyLoad de WP Rocket ?

WP Rocket propose un système de chargement asynchrone des images très intelligent. Les images se chargent lorsqu’elles apparaissent sur l’écran du visiteur.

Par défaut, le script propose de placer l’URL de votre image dans l’attribut data-lazy-src. Il place aussi l’image originale dans une balise <noscript> pour des raisons d’accessibilité et de référencement. Lorsque votre image doit apparaître la valeur de data-lazy-src vient remplacer le contenu de l’attribut src et fait apparaître l’image de manière brute.

Une solution CSS3 très simple

Grâce au sélecteur d’attribut compatible depuis Internet Explorer 7, il est possible de cibler des éléments en fonction des attributs qu’ils possèdent.

Lorsque l’attribut data-lazy-src offre sa valeur à l’attribut src de l’image, il disparaît tandis que le src se complète.

Il est donc possible de reconnaître différents états de notre image :

• dans le code, mais pas visible (l’attribut data-lazy-src est présent)
• dans le code, et visible à l’écran (l’attribut data disparait et src commence théoriquement par “http”)

Le code CSS suivant, que vous pouvez placer dans le fichier style.css de votre thème, permet de proposer une animation d’apparition (Fade In) :

/* préparation de l’animation pour toutes les images */
img {
-webkit-transition: opacity .5s linear 0.25s;
-moz-transition: opacity .5s linear 0.25s;
transition: opacity .5s linear 0.25s;
}
/* lorsque l’image n’est pas visible, on passe l’opacité à 0 */
img[data-lazy-src] {
opacity: 0;
}
/* lorsque l’image devrait être visible, on place l’opacité à 1 */
img[src^="http"] {
opacity: 1;
}

Ce code ne change rien pour les navigateurs ne comprenant pas la propriété CSS3 transition.

Il est bien entendu possible de limiter cet effet aux images que vous souhaitez animer en remplaçant img par le sélecteur que vous désirez. Par exemple, .post-thumbnail permet de limiter l’effet aux images à la une de vos articles ou pages.

Vous pouvez découvrir cet effet de transition sur notre blog (image à la une & avatar) ou sur celui de l’auteur de cet article : http://www.creativejuiz.fr/blog/