Table des matières

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/


Ajoutez un commentaire
Votre adresse mail ne sera pas publiée. Tous les champs doivent être remplis. Politique de commentaires : nous aimons les commentaires et apprécions le temps que les lecteurs passent à partager leurs idées et à donner leur avis. Cependant, tous les commentaires sont modérés manuellement et ceux qui sont considérés comme du spam ou purement promotionnels seront supprimés.
Comments (5)

Vraiment très sympa comme astuce.
Ca marche nickel ! Merci.

Simple, efficace et vraiment rapide à mettre en place.

@Gwen : de rien, ravis que cela vous plaise.
Très belle thématique votre site web :)

Bonjour,
J'ai envie de tester mais faut-il mettre à la suite dans le fichier style.css ? car j'ai déjà les infos de mon thème je demande avant de faire une bêtise :)
C'est sous la forme
/*
Theme name...
....
*/
Je colle à la suite ou entre les /* ?

Merci bonne continuation.

CSS3 is really very show. Many thanks for these tips.


Derniers articles de Temps de chargement et cache
S’abonner à notre newsletter

Stay in the loop with the latest WordPress and web performance updates.
Straight to your inbox every two weeks.

Obtenez un site Web plus rapide
en quelques clics

Installation en 3 minutes chrono