Using load function instead of ready function in jquery Cycle slideshow

Question

This is part of my code:

  <script type="text/javascript">
  $(document).ready(function(){
$('#slideshow').cycle({
fx: 'cover',
speed: 2500,
timeout: 2000
});
}); 
</script>

I want to use load function instead of ready, because I want my slideshow to be started after all images are completely loaded.

In stackoverflow question below, it's suggested to use this code:

Check if images are loaded?

$('.slideshow img').load(function(){
$('.slideshow').show().cycle();
});

and also display the images in the body tag as : none. when I apply this code to my own slideshow (without displaying the images as none), my slideshow doesn't start.

How I should write this code? Thanks

Answer 1

You could try the following

$(window).load(function() {
   $('#slideshow').cycle({
     fx: 'cover',
     speed: 2500,
     timeout: 2000
   });
});

This should wait to all content and graphics are loaded before running the cycle.