Educating a bus

8th Oct 2004

Here's two subjects... photography and displaying photography on a web page. It seems a shame to discuss the displaying of these photographs when I'd really like to make a fuss of them. However...

educating a busThere's an attractive old bus sitting in a yard next to my work and I've been meaning to photograph it for ages. It has a strange but appealing makeup: layers of flaky paint, shiny silver surfaces next to years of rust and subtly concealed typography. There's fourteen images in total and I've displayed them using Eric Meyers recent XHTML Slideshow. And herein lies the second subject.

bullet holesThe slideshow works wonderfully except for one problem, all the images have to load before the slideshow works. Therefore you have to wait several seconds to download the (598kb for this particular set of) snaps... and that's only if you have a 512k internet connection. Don't even mention dial-up.

So I thought I'd add a wee preloader to advise viewers that it would take a few seconds to download the slideshow before proper viewing could commence. I used some Javascript to display (onload) a div over the top of the photos as they loaded with some text saying "Loading.. please wait". Here's the wee function:

<script type="text/javascript">
<!-- Begin
function clearpage()
{
if(document.getElementById)
{
document.getElementById('preloader').style.visibility='hidden';
}
}
// End -->
</script>

Here's the style:

<style type="text/css">
#preloader
{
position:absolute;
font-family:arial;
font-size:large;
left:0;
top:0;
background-color:#fff;
height:100%;
width:100%;
}
</style>

So with an "onload" call in the body tag as such:

<body onload="clearpage()">

and an extra div in the markup:

<div id="preloader">Loading... please wait</div>

...it all seemed to work fine until the images fully loaded. Then there was a conflict with the Javascript that operates the slideshow... bugger!

So the temporary result is this, I ask you to wait until all the images have downloaded before you start viewing the slideshow. Additionally I would appreciate any feedback as to what I'd need to do to make it work as well. ;o)

View the slide show.