如何在加载JavaScript幻灯片之前停止加载图片？

Question

I am new to this and have a quick question. I have a very simple slideshow on my home page. The problem I am having is the first second or so of loading the page, the slideshow images show up 1 on top of the other. Once the first second or so of loading the page is over, everything works fine. Here is my code for the javascript:

<script type="text/javascript" language="javascript">
        window.onload = function () {
            var rotator = document.getElementById("slideshow_content");
            var images = rotator.getElementsByTagName("img");
            for (var i = 1; i < images.length; i++) {
                images[i].style.display = "none";
            }
            var counter = 1;
            setInterval(function () {
                for (var i = 0; i < images.length; i++) {
                    images[i].style.display = "none";
                }
                images[counter].style.display = "block";
                counter++;
                if (counter == images.length) {
                    counter = 0;
                }
            }, 3000);
        };
    </script>

Here is the body code:

<div id="slideshow">
<div id="slideshow_content" style="padding-top:10px; padding-bottom:10px;">
        <img alt="" src="/images/slide1.jpg" />
        <img alt="" src="/images/slide2.jpg" />
</div>
</div>

Here is the CSS for the 2 divs:

#slideshow {position:relative; top:0; left:0; max-width:1680px; height:342px; margin:0     auto; padding:0; background-color:#070707;}
#slideshow_content {width:960px; max-height:322px; margin:0 auto; padding:0;}

How would you recommend fixing this?

Answer 1

I would set the CSS to hide the slideshow on page load, and then when the slideshow starts it could be unhidden.

This would also mean that if someone had javascript disabled they wouldn't get a weird looking pile of images.

Alternatively you could hide all but the first image using CSS, so that even if someone had javascript disabled they would see the first image.