Effet de fondu entrant pour le Lazyload de vos images

WP Rocket vous donne la fonction intelligente LazyLoad pour vos images et iframes (y compris les vidéos). Ces ressources sont chargées uniquement quand elles doivent être affichées sur l’écran de votre visiteur, ce qui permet à votre site de charger bien plus vite. Même si l’image n’est pas immédiatement affichée, le LazyLoad fournit également une marque alternative pour l’optimisation dans les moteurs de recherche (décrite ci-dessous).

Le principe

Le script de LazyLoad utilise l'attribut data-lazy-src pour conserver l'URL de votre image. Il ajoute également la balise image originale dans une balise <noscript> pour la compatibilité SEO et l'accessibilité.Quand votre image doit apparaitre (car le visiteur a fait défiler la page), la valeur de l'attribut data-lazy-src remplace la valeur de l'attribut src et affiche l'image.

Une solution simple en CSS3

Grâce au sélecteur d'attribut (compatible Internet Explorer 7), il est possible de cibler les éléments en fonction des attributs qu'ils possèdent. Quand l'attribut data-lazy-src passe sa valeur à l'attribut source de votre image, celui-ci disparait, laissant l'attribut src complet.

En d'autres termes, il est possible de distinguer les deux états de vos images :

• Présentes mais non visibles (l'attribut data-lazy-src existe)
• Présentes et visibles (l'attribut data-lazy-src n'existe pas et la valeur de l'attribut src commence par "http")

Le code CSS suivant vous permet d'appliquer un fondu entrant avec transition. Collez ce code dans votre fichier style.css (ou un autre fichier CSS de votre thème) :

/* Image with 'data' attribute is hidden */
img[data-lazy-src] {
/* we set the opacity to 0 */
   opacity: 0;
}
/* Image without 'data' attribute is (or becomes) visible */
img {
/* prepare the future animation */
   -webkit-transition: opacity .5s linear 0.2s;
       -moz-transition: opacity .5s linear 0.2s;
                 transition: opacity .5s linear 0.2s;
/* we set the opacity to 1 to do the magic */
   opacity: 1;
}

Si le navigateur de votre visiteur ne supporte pas les propriétés de transition CSS3, ce code ne fera rien.