jQuery Cycle Plugin Preload Wrapper

jquery.cycle.preload.js

/* jQuery Cycle Plugin Preload Wrapper
 * Copyright (c) 2010 Brent O'Connor (http://www.epicserve.com)
 * Version: 0.5 (03-25-2010)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * 
 * Requires:
 * jQuery v1.2.6 or later (http://jquery.com/)
 * jQuery Cycle Plugin 2.81 or later (http://malsup.com/jquery/cycle/)
 * 
 * Description:
 * This script is wrapper script for the jQuery Cycle Plugin which makes it
 * easier to preload all your photos after your page has loaded. This makes
 * the overall page load much faster, especially if you have a lot of images
 * and this makes your website seem like it's loading faster for the user.
 * 
 * It's probably not necessary to mention this but I would combine the
 * preload and cycle scripts when you're ready for it to go into production.
 * I would also use the YUI! Compressor or the Google Closure Compiler.
 * 
 * Example Usage:
 * <script src="/js/jquery-1.4.min.js" type="text/javascript" charset="utf-8"></script>
 * <script src="/js/jquery.cycle.all.min.js" type="text/javascript" charset="utf-8"></script>
 * <script src="/js/jquery.cycle.preload.js" type="text/javascript" charset="utf-8"></script>
 * <script type="text/javascript" charset="utf-8">
 * $(function() {
 *     cycle_preload({
 *         photo_container: '#side-slideshow .photos',
 *         total_photos: 17,
 *         img_url: '/img/slideshow/photo-%d.jpg',
 *         photo_alt_attr: 'My Alt Photo Text',
 *         randomize: true
 *     });
 * });
 * </script>
 * 
 * <div id="slideshow" class="pics"> 
 *     <img src="images/beach1.jpg" width="200" height="200" /> 
 *     <img src="images/beach2.jpg" width="200" height="200" /> 
 * </div>
 * 
 */
var cycle_preload = function(options) {
	
	var self = cycle_preload;
	
	var o = $.extend({
		photo_container: '#slideshow',
		total_photos: 10,
		preload_photo_num: 2,
		photo_arr: [],
		index_arr: [],
		photos_added: false,
		img_url: '/img/photo-%d.jpg',
		photo_alt_attr: 'Photo',
		randomize: true,
		fx: 'fade',
		timeout: 4000
	}, options);
	
	// create an index array the same length as the o.total_photos var
	for (i = 0; i < o.total_photos; i++) o.index_arr.push(i);
	
	// if randomize is true then randomize the index_arr
	if (o.randomize === true) {
		o.index_arr.sort(function(a,b) {return Math.random() - 0.5;});
	}
	
	// create an array to store our photos
	for (i = 0; i < o.total_photos; i++) o.photo_arr.push('<img alt="'+o.photo_alt_attr+'" src="'+o.img_url.replace('%d', i+1)+'" />');
	
	// start preloading photos
	pre_load_photos();
	
	function pre_load_photos() {
		
		// preload the number of photos to preload
		for (i = 0; i < o.preload_photo_num; i++) {

			img = new Image();
			$(img).bind('load', function() {
				var el = $(this);
				el.attr('alt', o.photo_alt_attr);
				$(o.photo_container).append(el);
				if ($(o.photo_container+' img').length === o.preload_photo_num) {
					startit();
				}
			});
			// img.src has to be created after bind for the preloading to work in IE
			img.src = o.img_url.replace('%d', o.index_arr[i]+1);
		}
	}

	function startit() {

		$(o.photo_container).cycle({ 
			fx:      o.fx, 
			timeout:  o.timeout,
			before:  on_before 
		});

	}

	function on_before(curr, next, opts) {

		// make sure we don't call addSlide before it is defined 
		if (!opts.addSlide || o.photos_added) return; 

		// slides can be a DOM element, a jQuery object, or a string 
		for (i = o.preload_photo_num; i <= o.index_arr.length-1; i++) opts.addSlide(o.photo_arr[o.index_arr[i]]);
		o.photos_added = true; 

	}

};