Lazy-loading slideshow with jquery.cycle

jquery.cycle.lazy.js

// this is a rudimentary attempt to implement a slideshow that doesn't saturate downloads with every image upon page load; instead the first slide is embedded in the HTML and loads with the page immediately, the second upon DOM ready, and subsequent upon the advance of each slide; additionally a progress indicator is displayed and slideshow paused if the next slide is still downloading thus preventing displaying partially downloaded images, or missing images entirely

var slides = [ // this is an array of the html representing each slide to display, in reverse order starting with the second slide (the first should be in the HTML page, see below); this markup may contain anything (e.g. li, div, captions) and should have corresponding css, but the first img tag is assumed to be the main image which we monitor for its download state
    '<img src="/path/to/file4.jpg">',
    '<img src="/path/to/file3.jpg">',
    '<img src="/path/to/file2.jpg">',
];

// callback functions
function loadedSlide(){
	$('#progress').hide();
	$('.slideshow').cycle('resume');
};
function beforeSlide(current, next, options, forward){
	// works only from second item
	var img = $(next).find('img')[0];
	if (slides[0] && options.addSlide) {
		options.addSlide(slides.pop());
	};
};
function afterSlide(current, next, options, forward){
	// works from first item upon initial load
	var img = $('.slideshow').find('img')[options.nextSlide];
	if (img.complete !=true) {
		$('.slideshow').cycle('pause');
		$('#progress').show();
		loadingTimer = +new Date();
		$(img).bind("load",loadedSlide);
	};
	if (slides[0] && options.addSlide) {
		options.addSlide(slides.pop());
	};
};

// create and enable slideshow
// we use append to add the second item immediately so we can then start the slideshow (it will probably complete download before it shows, and won't slow down the first image because it's tied to DOM ready); subsequent slides are handled by callback to the functions above
// the options used set the slideshow to use a 4sec timing for each slide and returns to the first one after showing all slides once; see http://www.malsup.com/jquery/cycle/ for additional usage

$('.slideshow').append(slides.pop()).cycle({ fx: 'scrollLeft', pause:true, next:'#nextslide', after:afterSlide, before:beforeSlide, autostop: true, autostopCount: slides.length+2, delay:4000 } );


// HTML page
// the a tag simply enables moving to the next slide without having any visible controls but they may of course be added, see the jquery.cycle docs
/*
<a id="nextslide">
<div id="progress" style="display:none"><img src="/kit/icons/indeterminate.gif"></div>
<div class="slideshow">
	<img src="/path/to/file1.jpg">
</div>
</a>
*/