Phase 2 "Loading" visual backdrop

Question

I'm attempting to include a loading animation GIF in my Cycle 2 plugin. Is there a way to ensure that the GIF loads before the images?

Right now, I have set my loading.gif as a background image. The issue is that the loading.gif isn't displaying first.

Answer 1

Answer №1

Check out the Cycle2 API page for more information on the loader option and also take a look at the corresponding demo. To summarize:

Add data-cycle-loader="wait" to the slideshow div in order to halt the slideshow until all images are fully loaded.
To display the loading gif, set the background of the slideshow div. You can center the image using CSS. Here is an example rule from the demo mentioned earlier:

.cycle-slideshow {
    background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;
}

Answer 2

Check out the Cycle2 API page for more information on the loader option and also take a look at the corresponding demo. To summarize:

Add data-cycle-loader="wait" to the slideshow div in order to halt the slideshow until all images are fully loaded.
To display the loading gif, set the background of the slideshow div. You can center the image using CSS. Here is an example rule from the demo mentioned earlier:

.cycle-slideshow {
    background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;
}