Preload images for jQuery Cycle Plugin

Question

I’m quite new to jquery and trying to figure out how to preload images for the jQuery Cycle Plugin.

I have 5+ large size images and I need those to be preloaded before starting the slideshow with Cycle plugin. Also I need to display a loading gif wile it preloads the images.

I have tried to implement the technique here http://jqueryfordesigners.com/image-loading/

but still couldn’t figure out how to make it work with the Cycle plugin.

Can anyone please help me with this?

Thanks

Solution

...or if what you are experiencing is a pause between image transitions, add this argument to the cycle function. It makes cycle ignore non img content, such as whitespace and linebreaks, which can cause cycle to pause between transitions.

jQuery('.imageslideshow').cycle({
    slideExpr: 'img',
    // other options
});