There are several cool, interesting ways to use Javascript to show progress indicators while images are downloading to your page. The method shown in this post is not one of them.

I have a simple ASP.NET page that has two dynamically generated images. The images are charts streamed from another ASPX page (e.g. <img src="MakeChart.aspx?someParamsHere" />), and they can sometimes take a couple of seconds to render on the page. This delay means people temporarily see a very bare page that looks like it has finished loading, and might start clicking around or navigating away before they get to see the pretty pictures. What I wanted was to give people some indication that stuff was happening, and that they should stick around for a few seconds.

Rather than whipping out ye olde JavaScript, I chose to keep things really simple. I created a CSS class to display the progress indicator as a background on the element holding the dynamic image. While the image is loading the background shows through. Once it is done, the background is covered by the final image.

<style>
.ChartPlaceholder {
  background-image: url("Images/loadingPlaceholder.png");
  background-position: center;
  background-repeat: no-repeat;
  height: <%= ChartHeight %>px;
  width: <%= ChartWidth %>px;
}
</style>
...
<div class="ChartPlaceholder">
  <asp:Image runat="server" ID="SomeDynamicChart"  />
</div>

In this case I have embedded the DIV’s height and width defined in the ASPX straight into the CSS declaration, as it seemed reasonable in the context in which I am currently using it, but you can obviously use other methods to make the DIV render sensibly prior to the image coming through.

A bit hacky, but very simple and worked nicely in FireFox and IE7.