Posted under javascript.

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

Tiny, fast javascript with Google Closure-Compiler


I’ve just spent a few hours trying to clean up the javascript on a project that’s about to launch, and I’m really impressed with Google’s Closure-compiler, it’s available online, as a Rest API or as a java app. I’ve been running it on my machine, with a shell script to batch the compilation of .js files.

It not a ‘real’ compiler, it doesn’t produce machine code, but it not only shortens your code, such as variable names etc, it also optimises it, to make it more efficient.

1
2
3
4
5
6
//before closure compiler
var settings = { maxZoom: 6, gridSize: 65, styles: clusterStyles };
if( !!markerClusterer ) markerClusterer = null;
markerClusterer = new MarkerClusterer( map, markers, settings );
// after
j&&(j=null);j=new MarkerClusterer(map, markers, { maxZoom: 6, gridSize: 65, styles: clusterStyles } );

Read more…