Efecto Fade In para tus imágenes con LazyLoad

WP Rocket te ofrece la inteligente característica de LazyLoad para tus imágenes y iframes (inluyendo los videos). Estos recursos se cargan solamente cuando tienen que ser visualizados en la pantalla de tu visitante, cosa que hace que tu sitio sea más rápido. A pesar de que la imagen no se visualice en seguida, LazyLoad proporciona también un tag alternativo para el SEO (lo describimos más abajo).

El principio

El script LazyLoad usa el atributo  data-lazy-src para almacenar el URL de tu imagen. Este añade también un tag imagen original en un tag <noscript>, para mejorar SEO y accesibilidad. Cuando tu imagen tiene que aparecer en la pantalla (porqué el usuario se ha desplazado en tu página web), el valor del atributo data-lazy-src llega a reemplazar lo del atributo src y hace que la imagen aparezca de repente.

Una sencilla solución CSS3

Gracias al selector de atributo (compatible con Internet Explorer 7), es posible apuntar los elementos según su atributo. Cuando el atributo  data-lazy-src pasa su valor al src de tu imagen, el primero desaparece, dejando sencillamente el atributo src por completo.

En otras palabras, es posible distinguir dos estados para nuestras imágenes:

  • aquí pero no visible (el atributo data-lazy-src está configurado)
  • aquí y visible (el atributo data-lazy-src desaparece y el src empieza con “http”)

El siguiente código CSS te permite aplicar el efecto disolvencia con una transición. Añade este código en tu fichero style.css (u otro de los ficheros CSS de tu tema) :

/* 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.lazyloaded {
/* 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 el navegador web de tu usuario no soporta las propiedades de transición CSS3, el código no tendrá ningún efecto.