0

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.

vishall
  • 3
  • 1
  • 4
  • cycle2 has a very robust API. What have you tried? – charlietfl Nov 24 '13 at 16:34
  • Think I've done it correctly, but failed to find how to add a text pre-loader. [Fiddle](http://jsfiddle.net/T27yk/1/) – vishall Nov 24 '13 at 16:41
  • I don't think API exposes image load event. WOuld need to implement your own from within API events. WOuld mean parsing slide src and using own javascript loader code within event callback – charlietfl Nov 24 '13 at 16:50
  • Yes, but I'm not able to do that, as I'm not a programmer. Any (rough) idea or code for adding such a function to what kind of callback? – vishall Nov 24 '13 at 16:59
  • well it will require programming the functionality you want using javascript. The API gives access to when a new slide is added through `cycle-slide-added` event. Within that event handler would need custom code. That is beyond scope of this site to do programming for you – charlietfl Nov 24 '13 at 17:15
  • Alright charlietfl! Thanks for the hint and the help, I think I need a developer to do that for me. – vishall Nov 24 '13 at 17:29

1 Answers1

0

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.

Community
  • 1
  • 1
Henry Florence
  • 2,848
  • 19
  • 16
  • Hi Henry! Thanks a lot man! I will put a custom loader using jQuery load function. Yes I've hosted the demo images on Google, was not aware of the quick loading logic. Again thank you for the help, regards! – vishall Nov 25 '13 at 12:56