Using CSS to pretend to have an Ajax loading of a large Image, when in fact, the animated gif is simply added to the background of the Image position. Being smaller, the background image loads faster/first and is presented in the Image's position while the large Image is being downloaded.

Of course, I have used a Meta tag to prevent caching, so a page refresh should duplicate the presentation.

The background image is about 10K and the Main image is a 1280 by 800 Image, so it is considerably larger and slower to load. The results may be affected by the speed of your Internet connection.

something 
img {
	background-image:url(invisible.gif);
	background-repeat:no-repeat;
	background-color: #ffffff;
	background-position: 50% 50%;
	}

/* shorthand version of the Ajax background Image CSS

img {
	background:url(invisible.gif) no-repeat 50% 50% #fff
	}

*/

Click here to return Back to the Index page

.