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

4 Comments

  1. kujon says:

    First of all – great work! Much cleaner and simpler than QueryLoader. Would be nice if it took care of preloading background-images too. The biggest problem with these preloaders is an order of loading images. You can defer loading an img, by removing its src attribute, but you cannot do that with background-image and therefore its tricky to load e.g. preloader animation first. Do you have an idea how to do that?

  2. nuzzaci says:

    Definitely. I’ll let you know (regarding beer, and mootools version)!!

  3. gabes says:

    do it!

    Next time you’re in town, we gotta have a beer!

  4. nuzzaci says:

    oooo. Really nice Mr Breaker ;) I might just try to make a Mootools version of this little gem ;)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">