Show an alternative image while another image loads

问题

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?

回答1:

You have two solutions.

1. You can use lazy loading of your image. For this solution, have a look to this question on stackoverflow: Lazy loading images how

2. 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.

来源：https://stackoverflow.com/questions/35375883/show-an-alternative-image-while-another-image-loads