Mostra un’immagine alternativa mentre viene caricata un’altra immagine

Ho un div con un’immagine di sfondo come questa:

 

Quando carico la mia pagina web, c’è un fastidioso secondo di sfondo vuoto mentre carica la mia immagine background.gif di grandi dimensioni. Come posso ottenere un’immagine alternativa caricata rapidamente e sostituita non appena l’immagine background.gif è pronta a prendere il suo posto?

Hai due soluzioni.

  1. Puoi utilizzare il caricamento lazy della tua immagine. Per questa soluzione, dai un’occhiata a questa domanda su StackOverflow: pigro caricamento immagini come

  2. E se la tua immagine è abbastanza piccola, puoi utilizzare un URI di dati anziché un link all’immagine. Questo incorporerà direttamente la tua immagine all’interno del codice html, quindi non c’è altro da caricare. Ecco una descrizione su come convertire la tua immagine nell’URI dei dati: http://www.abeautifulsite.net/convert-an-image-to-a-data-uri-with-your-browser/

La prima soluzione risponde alla tua domanda. Il secondo no, ma è un’altra soluzione allo stesso problema.