Effetto Dissolvenza per il tuo LazyLoad

WP Rocket ti permette di usare l'intelligente opzione LazyLoad sia per le immagini che per gli iframe (inclusi i video). Queste risorse vengono caricate solo quando devono essere visualizzate sullo schermo del tuo visitatore, cosa che permette al sito web di caricare più velocemente. Anche se l'immagine non viene immediatamente visualizzate, LazyLoad fornisce un tag alternativo, così da rispettare anche l'ottimizzazione SEO (vedi più avanti).

Il principio di base

Lo script LazyLoad usa l'attributo  data-lazy-src per immagazzinare la URL della tua immagine. In più aggiunge un tag immagine originale all'interno di un <noscript> per ragioni di SEO e accessibilità. Quando il visitatore del tuo sito scorre la pagina e quindi l'immagine deve comparire sullo schermo, il valore dell'attributo data-lazy-src va a sostituire quello dell'attributo src: questo fa in modo che l'immagine appaia come previsto.

Una semplice soluzione CSS3

Grazie al selettore d'attributo (compatibile con Internet Explorer 7), è possibile identificare gli elementi sulla base degli attributi che questi posseggono. Quando l'attributo data-lazy-src passa il suo valore al src della tua immagine, il primo scompare, lasciando semplicemente l'attributo src.

In altre parole, è possibile distinguere due stati per le nostre immagini:

  • presente ma non visibile (attributo data-lazy-src configurato)
  • presente e visibile (l'attributo data-lazy-src scompare e quello src inizia con “http”)

Il seguente codice CSS ti permette di applicare l'effetto dissolvenza alla tua immagine durante la transizione da un attributo all'altro. Copia questo codice nel tuo file style.css (o un altro dei file CSS del tuo 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; }

Se il browser dell'utente non supporta la funzione di transizione con CSS3, questo codice semplicemente non avrà effetto.