Segnaposto sfondo/immagine mentre si attende il caricamento completo dell'immagine?

Question

Ho alcune immagini sulla mia pagina. Sto scoprendo che la pagina inizia a renderizzare prima che le immagini siano state caricate (che è buono), ma che l'effetto visivo non è eccezionale. Inizialmente l'utente vede questo:

--------hr-------- 
text 

Poi un paio di millisecondi dopo la pagina di salti per mostrare questo:

--------hr-------- 
[   ] 
[ image ] 
[   ] 
text 

C'è un modo semplice che posso mostrare un'immagine di sfondo grigio esattamente la larghezza e altezza che l'immagine occuperà, fino a quando l'immagine stessa non viene caricata?

Il fattore di complicazione è che non conosco l'altezza e la larghezza delle immagini in anticipo: sono reattivi e sono impostati su width: 100% del div contenitore. Questo è il codice HTML/CSS:

<div class="thumbnail"> 
<img src="myimage.jpeg" /> 
<div class="caption">caption</div> 
</div> 
img { width: 100% } 

Ecco un JSFiddle per illustrare il problema di fondo: http://jsfiddle.net/X8rTB/3/

Ho guardato in cose come LazyLoad, ma non posso evitare di pensare ci deve essere un semplice, risposta non JS. O è il fatto che non conosca in anticipo l'altezza dell'immagine come un problema insormontabile? Conosco le proporzioni delle immagini.

Answer 1

L'unica cosa che posso pensare, per minimizzare l'effetto di salto sul testo, è impostare min-height nel punto in cui apparirà l'immagine, direi - impostarlo sull'immagine "più corta" che si conosce. In questo modo il salto sarà meno evidente e non sarà necessario usare lazyLoad o così ... Tuttavia non risolve completamente il problema.

Answer 2

Invece di fare riferimento direttamente l'immagine, incollarla all'interno di un DIV, come il seguente:

<div class="placeholder"> 
    <div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div> 
</div> 

Poi nel CSS:

.placeholder { 
    width: 300; 
    height: 300; 
    background-repeat: no-repeat; 
    background-size: contain; 
    background-image: url('my_placeholder.png'); 
} 

Answer 3

C'è una cosa molto semplice da controllare prima di inizia a guardare in pigro-caricamento e altri JS. Assicurati che le immagini JPG che stai caricando siano salvate con l'opzione 'progressiva' abilitata! Ciò causerà loro di caricare l'immagine in modo iterativo, iniziando con un segnaposto a bassa risoluzione e più veloce da scaricare, piuttosto che attendere i dati di più alta risoluzione prima del rendering.

Answer 4

Ecco un modo ingenuo di farlo,

img { box-shadow: 0 0 10px 0 rgba (# 000, 0,1); }

È possibile manipolare i valori, ma ciò che fa è si crea un bordo molto luce intorno l'immagine che non spinge i contenuti. Le immagini possono essere caricate in qualsiasi momento e si ottiene una buona esperienza utente.

Speranza che aiuta