js preloader example

preloader.js

/**
 * Simple asset preloader class.
 *
 * @dependency: delegate
 */
function Preloader( assets, callback ) {
  this.assets = assets;
	this.asset = null;
	this.assetIndex = 0;
	this.callback = callback;
	this.loadNextAsset();
};

Preloader.prototype.loadNextAsset = function() {

	this.onupdate( 100 / this.assets.length * this.assetIndex );

	if( this.assetIndex >= this.assets.length ) {
		return this.callback.call();
	}
	
	this.asset = new Image();
	this.asset.onload = delegate(this, this.loadNextAsset);
	this.asset.src = this.assets[ this.assetIndex++ ];
	
};

Preloader.prototype.onupdate = function( percentage ) {
	// Default, do nothing.
};
  	
    
    
    //
    // index
    //
    var baseURL = "http://www.madebymog.com.au/";

			function onPreloadDone() {
				// Dynamically load the global stylesheet.
				$('head').append('<link rel="stylesheet" type="text/css" href="'+baseURL+"css/global.css?skgRmMH0"+'">');

				// Load Javascript for The Story.
				$.getScript(baseURL+"js/the-story.js", function(data, textStatus) {
					theStoryInit();
				} );

				// Load Javascript for About MOG.
				$.getScript(baseURL+"js/about.js", function(data, textStatus) {
					aboutInit();
				} );

				// Load Javascript for Make a Mix.
				$.getScript(baseURL+"js/make-a-mix.js", function(data, textStatus) {
					mixInit();
				} );

				// Load Javascript for The Orchard.
				$.getScript(baseURL+"js/the-orchard.js", function(data, textStatus) {
					orchardInit();
				} );

				// We want each section to be at least the height of the browser window
				// but no less that 768px.
				var minHeight = $(window).height();

				if( minHeight > 900 ) {
					minHeight = 900;
				}
				
				createStyle(".content-height", "{ min-height: "+(minHeight+60)+"px !important; }");

				// Add a bit of lag to the preloader before showing the home page.
				var timerPreload = setTimeout( function() {
					clearTimeout( timerPreload );

					$(".preloader-container").fadeOut(250, function() {
						$(".page").fadeIn(250, function() {
							gotoSection( window.location.href.split("#")[1] );
						} );
					} );
				}, 500 );
			}
			
			$(document).ready( function() {
				$(".preloader-container").fadeIn(250, function() {
					var assets = [
						baseURL+"assets/dark-bg.jpg",
						baseURL+"assets/bottle-apple-black-large.png",
						baseURL+"assets/bottle-apple-black-large-lined.png",
						baseURL+"assets/bottle-apple-black-large-logo.png",
						baseURL+"assets/bottle-apple-black-small.png",
						baseURL+"assets/bottle-apple-clear-large.png",
						baseURL+"assets/bottle-apple-clear-large-lined.png",
						baseURL+"assets/bottle-apple-clear-large-logo.png",
						baseURL+"assets/bottle-apple-clear-small.png",
						baseURL+"assets/bottle-apple-cloudy-large.png",
						baseURL+"assets/bottle-apple-cloudy-large-lined.png",
						baseURL+"assets/bottle-apple-cloudy-large-logo.png",
						baseURL+"assets/bottle-apple-cloudy-small.png",
						baseURL+"assets/made-by-mog.png",
						baseURL+"assets/make-your-mix-text.png",
						baseURL+"assets/summer-yes-you-text.png",
						baseURL+"assets/yes-you-text.png",
						baseURL+"assets/bottles.png",
						baseURL+"assets/try-mog-button.png",
						baseURL+"assets/mog-telstra.png",
						baseURL+"assets/make-mog-mix-button.png",
						baseURL+"assets/check-out-mog-button.png",
						baseURL+"assets/the-story-heading.png",
						baseURL+"assets/stepnum-bg.png",
						baseURL+"assets/icon-list.png",
						baseURL+"assets/btn-blackcurrant.png",
						baseURL+"assets/btn-clearapple.png",
						baseURL+"assets/btn-cloudyapple.png",
						baseURL+"assets/btn-startmixing.png",
						baseURL+"assets/orchard-1-bluesuedejuice.png",
						baseURL+"assets/orchard-2-babyiwasgrown.png",
						baseURL+"assets/orchard-3-tastesliketeen.png",
						baseURL+"assets/orchard-4-makeyourmix.png",
						baseURL+"assets/about-mog-text.png",
						baseURL+"assets/devices.png",
						baseURL+"assets/check-out-mog-about-button.png",
						baseURL+"assets/close-button.png",
						baseURL+"assets/red-triangle-up.png",
						baseURL+"assets/about-video-1.png",
						baseURL+"assets/about-video-2.png",
						baseURL+"assets/about-video-3.png",

						// slides
						baseURL+"assets/video-1-preview.jpg",
						baseURL+"assets/video-2-preview.jpg",
						baseURL+"assets/video-2-preview.jpg",
						//
						
						baseURL+"assets/logo.png"
					];
					
					var preloader = new Preloader( assets, onPreloadDone );
					preloader.onupdate = function( percentage ) {
						$(".preloader p").text( Math.round( percentage )+"%" );
					}
				} );
			} );