If like me you include your java scripts and
$(document).ready(function() {
});
at the bottom of the page, than very often when using jQuery slide show (for example cycle plugin or similar), you will notice that the images load first and show up on the page before being hidden via script located at the bottom of the page.
There is a simple workaround that I use to make sure that this does not happen.
In this example we have three images/banners that I want to rotate using jQuery. The "slideshow" class is my hook for the jQuery plugin and I have added "jqhidden" class which I use first
to hide and than to show the div once script is loaded.
<div class="slideshow jqhidden">
<a href="#"><img src="banner1.jpg"></a>
<a href="#"><img src="banner2.jpg"></a>
<a href="#"><img src="banner3.jpg"></a>
</div>
Using CSS I hide the div, the style sheet is loaded first so the images do not show.
.jqhidden {
visibility:hidden;
}
Than at the bottom of the page I include a function which changes the visibility from "hidden" to "visible".
<script type="text/javascript">
$(document).ready(function() {
// cycle plugin script
$('.slideshow').cycle({
fx: 'scrollRight' ,
speed: 1000 ,
timeout:5000
});
// show the div with slide show
$('.jqhidden').css('visibility','visible');
});
</script>
I use this method with not only slide shows and galleries but for other visual elements for example tabs.