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 :

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/

Avatar de l’auteur

Jonathan is Lead Project on WP Rocket. Addicted to WordPress and Co-organizer of WordCamp Paris & Lyon.

5 commentaires

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.

Ajouter un commentaire
Votre adresse e-mail ne sera pas publiée. Tous les champs doivent être remplis. Politique de commentaires : Nous apprécions les commentaires et le temps que les lecteurs consacrent à partager leur avis. Cependant, tous les commentaires sont modérés manuellement et ceux qui sont considérés comme du spam ou uniquement promotionnels seront supprimés.

Obtenez un site plus rapide en quelques clics

Installation en 3 minutes chrono

Achetez WP Rocket Qu’attendez-vous?

{"cart_token":"","hash":"","cart_data":""}