12/24/2012 - 3:21 PM

Progressive loading with Cycle2

Progressive loading with Cycle2

Cycle2 doesn't support progressive loading for sliders utilizing the pager option:

As a quickfix I lazyload all images with jail.js and after jail is finished I initialize cycle().


1. Download jail.js:
   hint: get familiar with all the options jail offers. It's really a nice tool.

2. Add jail.js to the head of your html

   <script src="/lib/jquery.js"></script>

2. Modify your image markup:

<div class="cycle-off" >
    <div class="cycle-pager"></div>

    <img data-src='assets/images/example.jpg' 
    <!-- no-js fallback -->
    <noscript><img src="assets/images/example.jpg"/><noscript>

Note that the original source of the image is moved to data-src. Instead we will load a fake image (grey.gif). 
The noscript part is only important if its important for you / or your vistors to see the image if js is broken for some reasons.

Next add a scripz block near the bottom of your page:

  		    loadHiddenImages : true                    // (1)
			    ,callback : (function(){                   // (2)
				    $('.cycle-off').each(function(){         // (3)
					  $(this).addClass('cycle-slideshow').removeClass('cycle-off'); (4)
					  $(this).cycle({                          // (5)
						  speed: 600,
						  slides: '> img'

(1) Make sure that hidden images are loaded as well (optional). For details read the jail.js documentation
(2) jail.js provides a nice callback that fires after it has finished loading all images. We will utilize this to fire cycle.
(3) Find all .cycle-off sliders and and execute some stuff while you are there...
(2) Remove the .cycle-off and add .cycle-slideshow.
(4) Initilize slideshow for this container.

Thats it...