nice css holder without image

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 h开发者_StackOverflow社区older without putting dummy image? using pure css without javascript possible?

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.

in css3 you can add multiple background images:

.realimage {
  background-image: url(haevy.png), url(dummy.png);
  background-position: center, center;
  background-repeat: no-repeat;
}

The first image is the top image

fiddle: http://jsfiddle.net/MbpgL/1/

warning: older browsers versions don't always like CSS3 especially IE. But i say people who do not upgrade/date don't deserve nice websites!