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
.
fonte
2015-08-05 20:41:08
si può provare a guardare qui: http://afarkas.github.io/lazysizes/ – areim
ho provato lazysizes. Ma le immagini vengono ancora caricate prima che venga mostrata l'immagine. – toy