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

Question

Hello all,

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();
    });

Answer 2

I have the same issue as Theo Ribeiro. I have a WordPress NextGen Carousel - which uses Jquery Cycle and JQuery - that loads images. One large image, plus thumbnails leading to the next images. None of the large images are preloaded. As I will have many galleries - about 20 of 10 images each - a basic javascript preloader listing all the images that need preloading is not really efficient and would make the preloading take too long. The same goes for a javascript or JQuery option to load all images form a folder. Two hundred images is just too much. Any efficient JQuery or JQuery Cycle solution for this?