Is there a quicker way to hide my images in the slideshow?

Question

As the title says, I do not wish to see the images when I load my page. I've used this script for my slideshow. This the the code:

<div id="slideshow" name="slideshow" class="slideshow">
    <div>
        <img src='{ROOT}img/Camerashop24/slide1.jpg' alt="slide-1" class="slide">
    </div>
    <div>
        <img src='{ROOT}img/Camerashop24/slide2.jpg' alt="slide-2" class="slide">
    </div>
    <div>
        <img src='{ROOT}img/Camerashop24/slide3.jpg' alt="slide-3" class="slide">
    </div>
    <div>
        <img src='{ROOT}img/Camerashop24/slide4.jpg' alt="slide-4" class="slide">
    </div>
</div>

<script>
    $("#slideshow > div:gt(0)").hide();

    setInterval(function() { 
      $('#slideshow > div:first')
        .fadeOut(0)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  10000);
</script>

When a page loads, I can quickly see the 4 images that are used in the slideshow. After that, the jQuery script hides them, but is there a way to hide them instantly? For example:

<div id="slideshow" name="slideshow" class="slideshow">
    <div>
        <img src='{ROOT}img/Camerashop24/slide1.jpg' alt="slide-1" class="slide" style="display: none;">
    </div>
    <div>
        <img src='{ROOT}img/Camerashop24/slide2.jpg' alt="slide-2" class="slide" style="display: none;">
    </div>
    <div>
        <img src='{ROOT}img/Camerashop24/slide3.jpg' alt="slide-3" class="slide" style="display: none;">
    </div>
    <div>
        <img src='{ROOT}img/Camerashop24/slide4.jpg' alt="slide-4" class="slide" style="display: none;">
    </div>
</div>

What would make me able to show them again after that?

Answer 1

Yep, basically don't let jQuery hide your images with:

$("#slideshow > div:gt(0)").hide();   // so remove this!!
                                      // Page is almost entirely rendered and it's
                                      // too late to hide images now

but use CSS instead:

#slideshow > div ~ div{
   display: none;
}

the above will only make visible the first slide DIV while hiding all the other next siblings.
The remaining jQuery will than do the rest for you.

CSS3 lets you use also something like:

#slideshow > div:not(div:first-child) {

you get the point.