Jquery Cycle Help

Question

I am using the Jquery cycle plugin.

I have it working fine with basic fades. However I would like to know how to load the images using javascript instead of having all the images on the page at the same time whilst maintaining the nice fade transition.

This is so if the user doesn't have javascript turned on they will only see one image instead of a stack of images.

Thanks in advance!

Answer 1

All explained here by the author himself.

A bried summary of the js required:

<script type="text/javascript"> 

    var stack = []; 

    // preload images into an array; we will preload beach3.jpg - beach8.jpg 
    for (var i = 3; i < 9; i++) { 
        var img = new Image(200,200); 
        img.src = 'images/beach' + i + '.jpg'; 
        $(img).bind('load', function() { 
            stack.push(this); 
        }); 
    }  

    // start slideshow 
    $('#slideshow').cycle({ 
        timeout:  2000, 
        before:   onBefore 
    }); 

    // add images to slideshow 
    function onBefore(curr, next, opts) { 
        if (opts.addSlide) // <-- important! 
            while(stack.length) 
                opts.addSlide(stack.pop());  
    }; 

</script>

Answer 2

The way I do this is to have all but the first image set with "style='display: none;". The cycle plugin will change this when it runs and selects that image. If javascript isn't enabled, the user will never see the additional images. This is simple, though the page takes just as long to load whether javascript is enabled or not. If you are looking to reduce the load time for the page -- say when you have lots of images, @redsquare's answer is probably better.