jQuery Cycle Plugin: How to preload first images with a loading background gif then fade in Cycle Slideshow?

Question

I'm struggling with this, maybe some of you can help...

• I have a home page slideshow with large images at www.theoribeiro.com using jQuery Cycle plugin

• Images are large and sometimes with slow connections (but even in fast ones) the behavior of the slideshow start is pretty ugly, showing the image all of a sudden or half-loaded.

• I want to make sure that at least the 2 or 3 first images are loaded before the slideshow starts and meanwhile I want to run a loading animated gif, then I want to fade in the first image.

I searched a lot on the internet and on the forums and tried loads of stuff with my limited knowledge of javascript and jQuery but could't come up with a solution.

Any help would be greatly appreciated!!!

Answer 1

Don't initialize the Cycle plugin until you have your images loaded. Use a preloading script like this one - http://jquery-howto.blogspot.com/2009/02/preload-images-with-jquery.html and after you have 2-3 images which you keep hidden you can initialize the Cycle plugin. Because your images are already in the cache you should not have problems with half shown images. By default display the loading image and hide it once you initialize the Cycle plugin.

// In response to the first comment

You can use plugin like this - http://plugins.jquery.com/project/ImageLoader and use PHP to generate the javascript. For example:

$("#slideShow").imageLoader({
   images: [
    <?php
        // You can populate this array from readin a directory or manually it is your choice.
        $images = array('1.jpg', '2.jpg');
        $l = count($images);
        for(int $i=1; $i<$l; $i++) {
            echo ($i>0 ? ',' : '') . "{src: '" . $v . "'}";
        }
    ?>
    ]}, function () {
        $('#slideShow').cycle();
    });