Home/ Questions/Q 6045355
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T07:06:56+00:00

UPDATE: I’ve edited the code below to show what I was using when I

  • 0

UPDATE: I’ve edited the code below to show what I was using when I tried to work with CSS visibility. I’m still stuck with this problem. I’ve also tried to remove the preloader() function from the body onLoad, but I can’t use getElementById because the element hasn’t loaded. My final thought was to just call rand(5) from within the HTML itself so that it adds a number to the end of the image filename if Javascript is enabled, but I’m not even sure how to incorporate that directly into the HTML. Any help would be greatly appreciated!

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 quickly on page load.

Here is the Javascript code I’m using:

// 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:

<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>

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is the JavaScript code that solved my problem:

    // 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/";


// Hide static image and preload slideshow images
function preloader() {

    // counter
    var i = 0;

    // create object
    imageObj = new Image();

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

}

// Control previous/next functions of slideshow
numImages = imgArray.length;
function f_slideshow( xflip ) {

    // grab source of current image
    var curImage = document["faces"].src;

    // get image number from string and convert to int
    curImage = parseInt(curImage.substring(curImage.length-5, curImage.length));

    // create source for next/previous link
    curImage = curImage + xflip;
    if (curImage > numImages)
        { curImage = 1 ; } 
    if (curImage == 0)
        { curImage = numImages ; }      
    document["faces"].src = baseURL + imgArray[curImage - 1];
}
    • 0