Progressive loading with Cycle2

gistfile1.txt

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().

HOWTO:

1. Download jail.js: https://github.com/sebarmeli/JAIL/blob/master/src/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' 
        src="assets/tpl/js/jail/grey.gif" 
        class='jail'
    >
    <!-- no-js fallback -->
    <noscript><img src="assets/images/example.jpg"/><noscript>
    ...  
</div>  

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:

<script>
    $(function(){
        $('img.jail').jail({
  		    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'
					  });
				  });
			  })
		  });
    });
</script>

(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...