I have the following code in the header of my homepage:

<script type="text/javascript">
<!--
var image1=new Image()
image1.src="photos/home/2005/princerupert.jpg"
var image2=new Image()
image2.src="photos/home/2006/jasperthink.jpg"
var image3=new Image()
image3.src="photos/home/2005/tracyarmfjord.jpg"
var image4=new Image()
image4.src="photos/home/2008/moonpyramid.jpg"
var image5=new Image()
image5.src="photos/home/2005/alaska.jpg"
var image6=new Image()
image6.src="photos/home/2006/switzerland.jpg"
var image7=new Image()
image7.src="photos/home/2005/moose.jpg"
var image8=new Image()
image8.src="photos/home/2008/cancunbeach2.jpg"
var image9=new Image()
image9.src="photos/home/2005/niagarafallsatnight.jpg"
//-->
</script>


And then the following in the body:

<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src" )
if (step<9)
step++
else
step=1
//call function "slideit()" every 6 seconds
setTimeout("slideit()",6000)
}
slideit()
//-->
</script>


Which makes a slideshow on my homepage. The problem that I have is that I want to add significanly more photographs to the slideshow. Perhaps upwards of 100. The problem I have is that all the photos load prior to anything else on the page loading. So obviously when I add in 100 photos, it can take a while for even my site logo to appear, as the slideshow loads first. So is there a way to add photos to this slideshow, without having them pre-load & slow down the rest of the page loading?

You could try doing the image preloading right within the slideit() function, which means you would have to place all the image paths into an array first:

var a = [];
a.push("photos/home/2005/princerupert.jpg");
a.push("photos/home/2006/jasperthink.jpg");
a.push("photos/home/2005/tracyarmfjord.jpg");
//etc...

Then later:

var step = 0;
var img = [];
function slideit(){
    //if browser does not support the image object, exit.
    if (!document.images)
         return;
    //load the next image to be used, if it isn't loaded already
    if(typeof img[step+1] != "undefined") {
         img[step+1] = new Image();
         img[step+1] = a[step+1];
    }
    document.images.slide.src = img[step].src;
    if (step < a.length)
         step++;
    else
         step = 0;
}
//first load the first image
img[0] = new Image();
//call function "slideit()" every 6 seconds
var intervalId = setInterval(slideit(), 6000);

Notice I completely changed some other things around also. I didn't test this, but it could get you started.