Cycle 2 “Loading” background image

Question

Im trying to add a loading now gif to my cycle 2 plugin. How do i force the gif to load before the images load?

Currently i have my loading.gif as a background image. Problem is the loading.gif isn't loading first

Answer 1

Have a look at the Cycle2 API page , the loader option and the associated demo . In summary:

• Set data-cycle-loader="wait" on the slideshow div. This pauses the slideshow until all images are loaded.
• Set the background of the slideshow div to display the loading gif. Use CSS to center this image. Here is the rule used in the above mentioned demo:

---

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