Slideshow Flashes on Page Load


I am a novice going through Jquery:Novice to Ninja and was trying the cross fade slideshow from Ch 4 on ie8. It works well but the pictures flash through initially as the page loads. I have tried variations of .hide(),.addClass(), and .css(‘zIndex’) to prevent this without success and have gone back to plain javascript. I would appreciate any suggestions.

<div id=“photos”>
<img alt=“Glendatronix” src=“…/…/images/glenda_200.jpg” />
<img alt=“Darth Fader” src=“…/…/images/fader_200.jpg” />
<img alt=“Beau Dandy” src=“…/…/images/beau_200.jpg” />
<img alt=“Johnny Stardust” src=“…/…/images/johnny_200.jpg” />
<img alt=“Mo’ Fat” src=“…/…/images/mofat_200.jpg” />

function rotatePics(currentPhoto) {
var numberOfPhotos = $(‘#photos img’).length;
currentPhoto = currentPhoto % numberOfPhotos;

$(‘#photos img’).eq(currentPhoto).fadeOut(function() {
// re-order the z-index
$(‘#photos img’).each(function(i) {
‘zIndex’, ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos
setTimeout(function() {rotatePics(++currentPhoto);}, 4000);

Many Thanks,


Completely hide your slideshow using css like this

#photos { display: none; }

then after rotatePics(1); add code to show it like this

$('#photos').css('display', 'block');

so it won’t be visible until javascript is executed.

Thank you very much.