Is there a way to replace the default image-not-loaded-yet browser icon? [duplicate]

Question

This question already has answers here:

jQuery/JavaScript to replace broken images (32 answers)

Closed 8 years ago.

(Note this does not refer broken images as therefore not a duplicate of previously asked questions).

I'd like to find or build a IMG wrapper that first shows a default background image from the local cache before showing the intended photo once it has loaded, similar to what Pinterest does (although Pinterest is even cooler and detects a color background that complements the image that's loading).

I have an app which loads a lot of photos - hundreds - and I would like to make the way they load in a feature rather than an ugly artifact of the browser.

Wouldn't it be cool if they looked liked this?

http://screencast.com/t/qlTUN9Z3MO

rather than like this

http://screencast.com/t/qlTUN9Z3MO

Can that be done?

Answer 1

I recommend using a SVG background-image in your CSS. You can also scale it to fit your display proportions using background-size ^doc. Also, remember to set your img's size (with CSS or HTML attributes), rather than letting it use the size of the image.

First, you need a background svg. You can use the simple background-image: url(x.svg) syntax, or consider using a data-url. There's a free tool for encoding them.

Next, you'll want to set the size of your background. If your image viewer has a distinct aspect ratio, make your svg the same proportions. Then, tell it to fill either vertically or horizontally. It shouldn't matter, but in the case of a fluke, I find vertical more reliable.

background-size: auto 100%; /* Vertical (full height) */
background-size: 100%; /* Horizontal (full width) */

Now while your image is loading, the background-image will show instead. Once it's loaded; it'll cover the background (assuming fully opaque).