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
[...] Shared Items – 17. June, 201117. June – 2011 || Tags: links || Geschrieben in: AllgemeinjQuery Takeover Loader11. June, 2011- jonas© Jonas Jaeger – 2009 var [...]
Definitely. I’ll let you know (regarding beer, and mootools version)!!
do it!
Next time you’re in town, we gotta have a beer!
oooo. Really nice Mr Breaker ;) I might just try to make a Mootools version of this little gem ;)