Gibt es eine schnellere Möglichkeit, meine Bilder in der Diashow zu verstecken?

Question

Wie der Titel sagt, möchte ich die Bilder nicht sehen, wenn ich meine Seite lade. Ich habe this Skript für meine Diashow verwendet. Dies ist der 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> 

Wenn eine Seite geladen wird, kann ich schnell die 4 Bilder sehen, die in der Diashow verwendet werden. Danach versteckt das jQuery-Skript sie, aber gibt es eine Möglichkeit, sie sofort zu verstecken? Zum Beispiel:

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

Was würde mich dazu bringen, sie danach wieder zu zeigen?

Answer 1

Ja, im Grunde lassen Sie sich nicht jQuery mit Ihren Bildern verbergen:

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

sondern CSS:

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

die oben nur sichtbar, die erste Dia DIV machen, während versteckt all die anderen nächsten Geschwister.
Die verbleibende jQuery wird dann den Rest für Sie tun.

CSS3 können Sie verwenden auch so etwas wie:

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

Sie erhalten den Punkt.