Show An Alternative Image While Another Image Loads

I have a div with a background image like this:

When I l

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