Connecting the dots…

Recently I had a requirement to show images inside an overlay, the problem was that the image that had to loaded was coming loading very slowing and the user couldnt get any sort of indication that the image was being loaded.

Ofcourse one clear solution was to call it via HTTPRequestObject but obviously that would have been an overkill for loading just an image, I came up with this solution (and i dont make any claims that no one has ever done this before) to use css only to method to show a loading image which is later replaced once the actual image has downloaded.

NOTE: This technique doesn’t work for transparent images.

The markup:

1
2
3

<div id="app-mod-mod1" class="mod">
<img src="slow_loading.gif">
</div>

CSS:

1
2
3

#app-mod-mod1 {
background: #FF url('ajaxyloader.gif') no-repeat fixed top left;
}

This will cause the image ajaxloader.gif to be loaded as the background for the div and it will get hidden behind the non transparent slow loading image.

A simple solution but works, without having to rely on javascript to updated the css classname and other cross browser incompatibility issues.