The slideshows on this page contain images that have large file sizes (500+ kb) in order to demonstrate Cycle2's image loading facilities.
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.
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>
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>
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.