Background image loading

I'm designing a photography website for a friend. One of the things that he's insisting on is that the site load quickly, and not re-load as people move between images. No Flash, either.

To give an idea of the setup:

On the gallery screen, there's a strip of 5 thumbnails, with a main viewscreen showing one image full size. As they click on thumbnails, the main image changes, as expected. They can scroll through the thumbnails to select a new picture. Again, nothing fantastic there. I'm planning on using Javascript for this, unless somebody has an alternate suggestion that I haven't considered.

So, here's the issue:

He has big, high quality images. He's a photographer, and he wants to highlight his work. Some of his categories have up to 40 photos. We obviously don't want to wait while they all load (and thumbnails) before showing the page. What I would like to have happen is for it to load the first 5 images & thumbnails, and allow the visitor to begin looking at and navigating the page, while the remainder of the images load in the background.

So, I know what I want, but have no clue how to do it. I only know the basics of Javascript, and it has been ages since I've had to do anything more complex than a popup. :rolleyes:

Does anybody have any suggestions / libraries / tutorials to get me moving in this direction?

If you happen to know of a good library that will handle the scrolling thumbnails, that would be awesome, too.

Thanks in advance.

heres something i wrote a little while ago! It works in ie7 and ff 2.0, not checked ne fing else, its not to swish, but its something you could use if you wanted to. Sorry about the lack of comments and the poor coding! But it works for the use i had!


in the head

<script>
var photo = new Array();
var totalphotos
var thumbid = new Array();

var thumb

function loadphoto(pitem,pthumb,pmain,ptext)
{
photo[pitem] = new Array();
photo[pitem][0] = new Image();
photo[pitem][0].src = pthumb;
photo[pitem][1] = new Image();
photo[pitem][1].src = pmain;
photo[pitem][2] = ptext;

totalphotos = pitem;
}

loadphoto(0,"images/photos/cmas041t.jpg","images/photos/cmas041.jpg","Nichola and Dave together Christmas 2004")
loadphoto(1,"images/photos/cmas042t.jpg","images/photos/cmas042.jpg","Nichola and Dave together Christmas 2004")
loadphoto(2,"images/photos/bunbet.jpg","images/photos/bunbe.jpg","Beauty and the Beast")
loadphoto(3,"images/photos/nic18t.jpg","images/photos/nic18.jpg","Nichola's 18th Bithday Party")
loadphoto(4,"images/photos/nic182t.jpg","images/photos/nic182.jpg","")
loadphoto(5,"images/photos/knmw1t.jpg","images/photos/knmw1.jpg","")
loadphoto(6,"images/photos/knmw2t.jpg","images/photos/knmw2.jpg","")
loadphoto(7,"images/photos/knmw3t.jpg","images/photos/knmw3.jpg","Nichola and Dave at Martin and Kari Bennit's Wedding")
loadphoto(8,"images/photos/nnd1t.jpg","images/photos/nnd1.jpg","")
loadphoto(9,"images/photos/nnd2t.jpg","images/photos/nnd2.jpg","")
loadphoto(10,"images/photos/nnd3t.jpg","images/photos/nnd3.jpg","")

function loadinital()
{

for (thisthumbid = 0; thisthumbid <= 2; thisthumbid++)
{
thumbid[thisthumbid] = thisthumbid

eval("document.images.thumb" + thisthumbid + ".src = photo[thumbid[" + thisthumbid + "]][0].src")
}

changephoto(0)
}

function changephoto(pid) {

document.images.mainimg.src = photo[thumbid[pid]][1].src

var txtdes = document.getElementById("txtdes");
txtdes.firstChild.nodeValue=photo[thumbid[pid]][2];
}


function nextthumb(incr){

for (thisthumbid = 0; thisthumbid <= 2; thisthumbid++)
{

if ((incr + thumbid[thisthumbid]) == -1)
{
thumbid[thisthumbid] = totalphotos
}
else
{
if (thumbid[thisthumbid] == totalphotos && incr == 1)
{
thumbid[thisthumbid] = 0
}
else
{
thumbid[thisthumbid] += incr
}
}


eval("document.images.thumb" + thisthumbid + ".src = photo[thumbid[" + thisthumbid + "]][0].src")
}

}
</script>

and in the body
<img src="images/photot.gif">

<table width="625">
<tr>
<td colspan="5" align="center" valign="middle" height="520" width="625"><img name="mainimg" id="mainimg"></td>
</tr>
<tr>
<td colspan="5" align="center" width="625"><span name="txtdes" id="txtdes">Image Discription Here (If you can see this then sorry but your browser is not running the javascript on this page properly.)</span></td>
</tr>
<tr>
<td width="80" height="150" align="right" valign="middle"><a href="javascript:nextthumb(-1)"><img name="previous" id="previous" src="images/larrow.gif"></a></td>
<td width="155" height="150" align="center" valign="middle"><a href="javascript:changephoto(0)"><img name="thumb0" id="thumb1"></a></td>
<td width="155" height="150" align="center" valign="middle"><a href="javascript:changephoto(1)"><img name="thumb1" id="thumb2"></a></td>
<td width="155" height="150" align="center" valign="middle"><a href="javascript:changephoto(2)"><img name="thumb2" id="thumb3"></a></td>
<td width="80" height="150" align="leftr" valign="middle"><a href="javascript:nextthumb(1)"><img name="previous" id="previous" src="images/rarrow.gif"></a></td>
</tr>
</table>