Image Loader

Why use an image loader?

Normally, when you start a slideshow it initializes and begins without concern for whether or not the slides contain images or if those images have been loaded by the browser. This can lead to undesirable behavior if an image has not yet loaded when it is it's turn to be displayed. This is where an image loader can be of assistance.

Cycle2 supports an attribute named data-cycle-loader which can be used to specify the type of loading behavior for your slideshow. The default value for this attribute is false which means that no special loading support is provided.

Setting the data-cycle-loader attribute to true instructs Cycle2 to delay adding slides to the slideshow until the images for that slide have been fully downloaded from the server. As soon as at least two slides are ready the slideshow will initialize and begin, and the remaining slides will be added to the initialized slideshow as their images arrive.

Setting the data-cycle-loader attribute to the value "wait" instructs Cycle2 to delay slideshow initialization until all images declared in the slideshow have been downloaded.

The difference between these two settings is in the delay before initialization and in the order of the slides. Since the data-cycle-loader="wait" option instructs Cycle2 to delay the slideshow initialization until all slides have loaded, there will likely be a very perceptible delay before the slideshow is visible. And since the data-cycle-loader=true option instructs Cycle2 to add slides to the slideshow as they arrive from the server, the slides may be displayed in an order that is different than the markup.

loader=wait

With data-cycle-loader set to "wait" the slides will always be displayed in their natural, markup order. However the slideshow will not begin until all images within its slides have been loaded.

<div class="cycle-slideshow" 
    data-cycle-loader="wait"
    ...
</div>

loader=true

With data-cycle-loader set to true the slides may not be displayed in their natural order since they will be added to the slideshow as they arrive. However the slideshow will initialize as soon as two slides are available.

<div class="cycle-slideshow" 
    data-cycle-loader=true
    ...
</div>

Non-Image Slides

Your slides do not have to be images in order to take advantage of Cycle2's loader capabilities. Your slides can be divs, or other elements that contain images, and Cycle2's loader functionality will handling them properly. The example below shows a slideshow with divs as slides, and those divs contain divs and images.