nice css holder without image

Question

any technique that can be used to place on image-holder while waiting for image to load. a typical way of doing is placing dummy image while waiting for real image to load.

my image code like below

<div id="realimage" style="background-image: real_image.jpg"/>

1. any nice way to put as image holder without putting dummy image? using pure css without javascript possible?

Answer 1

You can use the data URI scheme as the source of the dummy image. It will load with the HTML and will not require an additional request.

So, in your CSS you could do this (embedding a red dot):

.realimage {background: url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')}

This is not supported on IE 6/7 and in IE 8 there is a 32k limit on the size of the image.