How to add preloader text to jQuery Cycle 2

Question

I want my jQuery Cycle 2 slideshow to show a "Loading..." pre-loader text over an image till the next one loads. I want the images to load in an asynchronous manner. Here is the code I'm using:

<figure class="cycle-slideshow manual" 
 data-cycle-fx="fadeout"
 data-cycle-timeout=0
 data-cycle-next="#next"
 data-cycle-prev="#prev"
 data-cycle-loader="true"
 data-cycle-progressive="#read">
    <img src="image1.jpg" />
</figure>
<script id="read" type="text/cycle">
 [

    "<img src='image1.jpg' />",
    "<img src='image2.jpg' />",
    "<img src='image3.jpg' />",
    "<img src='image4.jpg' />",
    "<img src='image5.jpg' />"
 ]
</script>
<section class="pagination center-text">
 <a href="#"><span id="prev">&#171; Previous</span></a> / <a href="#"><span id="next">Next &#187;</span></a>
</section>

The slideshow I obtained from the above code is working fine. But I'm not sure how can I add a pre-loading text message to it. Please guide me what I'm missing on.

Here is a fiddle demonstrating the slideshow.

Answer 1

This post here has some ideas: How to display loading image while actual image is downloading . Using a 'loading.gif' image: http://jsfiddle.net/T27yk/2/ , using the css:

img.cycle-slide {
  background: url('http://jimpunk.net/Loading/wp-content/uploads/loading1.gif') no-repeat;
}

Are you experiencing issues with load times of the images? You seem to be hosting the images on google, which should make load times very quick negating the need for any kind of loading message.