(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?
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).