Show an alternative image while another image loads

Question

I have a div with a background image like this:

<div class="carousel-image" 
     style="background: url(img/background.gif) no-repeat center center;">
</div>

When I load my webpage, there's an annoying second of blank background while my large background.gif image loads. How can I go about having an alternative image that loads quickly and is replaced as soon as the background.gif image is ready to take its place?

What you want to do is called "image lazy loading" Have a look to http://stackoverflow.com/questions/5582739/lazy-loading-images — Charles-Édouard Coste, Feb 13 '16 at 03:59
Thanks Charles -- seems like I can use this to solve my problem! — vmpfc1, Feb 13 '16 at 04:01
It seems like lazy loading is usually done with an where its src is swapped out with another -- how would I do this by changing style= to something else? — vmpfc1, Feb 13 '16 at 04:46

score -1 · Accepted Answer · edited May 23 '17 at 12:31

You have two solutions.

You can use lazy loading of your image. For this solution, have a look to this question on stackoverflow: Lazy loading images how
And if your image is small enough, you can use a data URI instead of a link to your image. This will embed directly your image inside the html code, so there is nothing more to load. Here is a description on how you can convert your image to data URI: http://www.abeautifulsite.net/convert-an-image-to-a-data-uri-with-your-browser/

The first solution answers your question. The second one does not, but it is an other solution to the same problem.

Show an alternative image while another image loads

1 Answers1

Linked