Come eseguire l'immagine di caricamento pigro con srcset?

Question

Sto utilizzando slick.js per creare un carosello. Tuttavia, anche se cambio l'attributo da src a data-lazy le immagini vengono ancora caricate prima di scorrere fino a quell'immagine. Sospetto che sia perché ho il tag srcset nella mia immagine. La mia domanda è come impedire al browser di caricare immagini reattive o come eseguire il caricamento lento per le immagini reattive in modo corretto.

Questo è il campione del mio tag img

<img data-lazy="better_me.jpg" srcset="better_me.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200" alt="better_me" width="200" height="200" sizes="(min-device-resolution: 1.6) 400px, 200px"> 

Answer 1

lazySizes sta solo lavorando bene. Devi comunque modificare il tuo markup in qualcosa di simile.

<img data-src="better_me.jpg" data-srcset="better_me2.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200 lazyload" data-sizes="auto" alt="better_me" width="200" height="200" /> 

Nota srcset viene modificato in data-srcset e data-lazy viene modificato in data-src. Inoltre è necessario aggiungere il lazyload di classe.

L'attributo sizes non ha avuto molto senso. Forse vuoi usare i descrittori x invece? O semplicemente usa sizes="200px"? Non lo so. L'ho semplicemente convertito in data-sizes="auto", quindi viene calcolato automaticamente per te. (Ma in questo caso la dimensione dell'immagine deve essere calcolabile prima che l'immagine sia caricata.)

lazySizes carica effettivamente le immagini prima del che vengono visualizzate. Questo è un grande miglioramento per l'esperienza dell'utente. Un utente, che fa scorrere qualcosa in vista, non vuole aspettare poi. Un lazyloader che inizia a scaricare un'immagine dopo che è già in vista interrompe l'esperienza dell'utente.

Una cosa bella di lazySize è che questo caricatore pigro controlla se il browser sta scaricando pesantemente e decide su questo fatto, sia che si scarichi solo nelle immagini di visualizzazione o che precarichi anche le immagini vicine.

Ma se non si desidera ciò è possibile controllare ciò impostando le opzioni lazySizes ' e expFactor.

Answer 2

Raccomando responsivelyLazy. L'implementazione è SEO-friendly e non rovina il tuo codice HTML. Ecco un frammento:

<div class="responsively-lazy" style="padding-bottom:68.44%;"> 
<img 
    alt="" 
    src="images/2500.jpg" 
    srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
    data-srcset="images/400.jpg 400w, images/600.jpg 600w, images/800.jpg 800w, images/1000.jpg 1000w, images/1500.jpg 1500w, images/2000.jpg 2000w" 
/> 

Come si può vedere il valore dell'attributo src non viene modificato.

saperne di più su http://ivopetkov.com/b/lazy-load-responsive-images/