Come posso creare un preloader di immagini in JavaScript?

Esistono molteplici preloader di immagini in jQuery, ma come possiamo implementarne uno usando solo JavaScript?

Quando un'immagine viene creata in memoria non dispone solo di un evento load che ne controlla il caricamento, ma anche di una proprietà booleana complete il cui valore cambia quando l'immagine è stata completamente caricata.

Ecco quindi la mia soluzione:

(function() {

	function loadImages( images, callback ) {
		var total = images.length,
			count = 0,
			i;


		function check( n ) {
			if( n == total ) {
				callback();
			}
		}


		for( i = 0; i < total; ++i ) {
			var src = images[i];
			var img = document.createElement( "img" );
			img.src = src;

			img.addEventListener( "load", function() {
				if( this.complete ) {
					count++;
					check( count );
				}

			});
		}

        
		
	}

	window.addEventListener( "load", function() {
		var imgs = [ "http://placehold.it/960x300", "http://placehold.it/960x350", 
					 "http://placehold.it/960x400", "http://placehold.it/960x200", 
					 "http://placehold.it/960x180" ];
		loadImages( imgs, function() {
			alert( "Complete!" );
		});


	});

})();