I created a slideshow with Javascript. The HTML calls a static image to display in the event Javascript is not enabled in the browser. If Javascript is enabled in the browser, it is supposed to load a random image in the place of the static image.

The problem I'm encountering is when Javascript is enabled, you see the static image load with the page and then, if the random image is different, you see it quickly load right after that. So it looks like two images cycling on page load.

Here is the Javascript code I'm using:

Code:
// Define images used in slideshow
imgArray = new Array(
"header_img1.jpg",
"header_img2.jpg",
"header_img3.jpg",
"header_img4.jpg",
"header_img5.jpg"
);
baseURL = "images/";

// Preload slideshow images
function preloader() {

    domElement = document.getElementById('gallery-image');
    domElement.style.visibility = "hidden";

    // counter
    var i = 0;

    // create object
    imageObj = new Image();

    // start preloading imgArray
    for (i=0; i<3; i++) {
        imageObj.src=imgArray[i];
    }
}


// Select random image to display for slideshow
function random_img() {

    domElement.style.visibility = "visible";
    rand = Math.round(Math.random()*(imgArray.length - 1));
    document["faces"].src = baseURL + imgArray[rand];
    rand += 1;
}
Here is the accompanying HTML:

Code:
<body onLoad="preloader();random_img();">
.
.
.
<a href="#" onclick="f_slideshow(-1);return false;">
<img src="images/header_img1.png" alt="" width="26" height="207" /></a>
<img src="images/header_img1.jpg" alt="" width="529" height="197" class="img-1" name="faces" />
<a href="#" onclick="f_slideshow(1);return false;">
<img src="images/header_img2.png" alt="" width="27" height="207" /></a>
As you can see, I've tried working with CSS visibility within the Javascript, but I'm still stuck with this problem.

How do I change what I have so when Javascript is enabled, you don't see the two cycling images?

Thanks!