Archive for June, 2011

jQuery Takeover Loader


A really simple jQuery plugin I’ve just written for my portfolio part of this site.

When the document is ‘ready’ call takeoverloader() on jQuery results (desired DOM elements). In my case I used $(document). It will then track all img elements in the children of your chosen element and report progress and completion of the loading process.

It will ignore img tags with an empty src attribute, or a class of .noloader

So you’re initial code would be something along these lines:

$(document).ready( function() 
{
	// hide content div (UI being loaded)
	$('#content').hide();
	// takeover the loading.
	$(document).takeoverloader( {
		progress: function( progressAmount ) // called each time an item is loaded
			{
				// do something with progressAmout (normalised)
				$('.loadprogress').text( Math.round( progressAmount * 100 )+'%' );
			},
		complete: function() // called when loading is finished
			{
				$('.loadprogress').hide();
				$('#content').fadeIn();
				// etc
			}
		}
	);
 
	// To forcibly remove events, call 'destroy'
	$(document).takeoverloader( 'destroy' );
});

It’s up on github, and there’s also a minified (google closure compiled) version in the repo too.

Links:
http://github.com/pixelbreaker/pixelbreaker_jquery/tree/master/takeoverloader