Existe-t-il un moyen plus rapide de masquer mes images dans le diaporama?

Question

Comme le titre l'indique, je ne souhaite pas voir les images lorsque je charge ma page. J'ai utilisé le script this pour mon diaporama. Ceci le le 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> 

Quand une page se charge, je peux rapidement voir les 4 images qui sont employées dans le diaporama. Après cela, le script jQuery les cache, mais y a-t-il un moyen de les cacher instantanément? Par exemple:

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

Qu'est-ce qui me permettrait de les montrer à nouveau?

Answer 1

Oui, fondamentalement, ne laissez pas jQuery cacher vos images avec:

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

mais utilisez CSS à la place:

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

le fera que rendre visible ci-dessus la première diapositive DIV en se cachant tous les autres frères et sœurs suivants.
Le reste de jQuery fera le reste pour vous.

CSS3 vous permet également d'utiliser quelque chose comme:

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

vous obtenez le point.