Image double-laoding problem with degradable JavaScript slideshow

JavaScript
1

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:

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

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!

2

You’re being affected by the slowness of the onload event.

Instead of that, place your calls to preloader and random_img at the end of the body, just before the </body> tag.

3

Thank you Paul, but I’m still seeing the double loading of the image. Here is the page with the sample code:

http://yazminmedia.com/clients/wbailey/index.html

4

It’s the repainting of the screen that helps to cause the slowdown.

Which web browser do you most experience the issue with?

5

It used to be Firefox, but now I’m seeing the issue a lot with Chrome as well.

6

I fear that the only solution that will be acceptable for you is one that cannot be used when scripting is disabled.

7

Shoot. :frowning: What would that be, by chance?

Do you think it’s just my approach? Maybe I can get the same results with something else…

8

That would be to not have the first unwanted image referenced in the HTML image in the first place - just start with an empty src attribute.

9

Which then makes it degrade badly in the absence of JavaScript. :frowning: /sigh

Ok. Looks like I’ll have to convert this part to PHP so that I can get the result I need. Thank you so much for your help in figuring that out!

10

You’re welcome.

The server-side solution that you have been inspired to perform is where the initial image is one that’s picked at random. Then after a suitable timeout you can show the next image, and so on.