Added load progress callback to binary loader.

Turns out it is working better over the real web than on localhost (where it seems loading is too fast for Chrome to pick up UI changes, so it queues them and shows them all just after loading is already finished).

Still not working properly - getting length of full content, this seems to be unreliable across browser / server combination.

Instead passing to callback JSON object with both total and loaded bytes, so this can be handled in the application layer:

{ total: bytes_total, loaded: bytes_loaded }

To be used e.g. like this:

loader.loadBinary( url, function( geometry ) { createScene( geometry ) }, path, updateProgress );

function updateProgress( progress ) {

    var message = "Loaded ";

    if ( progress.total ) {

        message += ( 100 * progress.loaded / progress.total ).toFixed(0) + "%";

    } else {

        message += ( progress.loaded / 1000 ).toFixed(2) + " KB";

    }

    $( "status" ).innerHTML = message;

}

src/extras/io/Loader.js

@@ -41,7 +41,7 @@ THREE.Loader.prototype = {
 	//  - urlbase parameter is mandatory (it applies to all models, it tells where to find the file with binary buffers)
 	//  - binary models consist of two files: JS and BIN
 
-	loadBinary: function( url, callback, urlbase ) {
+	loadBinary: function( url, callback, urlbase, callback_progress ) {
 
 		// #1 load JS part via web worker
 
@@ -63,7 +63,7 @@ THREE.Loader.prototype = {
 			//  Also, worker loading huge data by Ajax still freezes browser. Go figure, 
 			//  worker with baked ascii JSON data keeps browser more responsive.
 
-			THREE.Loader.prototype.loadAjaxBuffers( buffers, materials, callback, urlbase );
+			THREE.Loader.prototype.loadAjaxBuffers( buffers, materials, callback, urlbase, callback_progress );
 
 		};
 
@@ -85,13 +85,15 @@ THREE.Loader.prototype = {
 	// See also other suggestions by Gregg Tavares
 	// https://groups.google.com/group/o3d-discuss/browse_thread/thread/a8967bc9ce1e0978
 
-	loadAjaxBuffers: function( buffers, materials, callback, urlbase ) {
+	loadAjaxBuffers: function( buffers, materials, callback, urlbase, callback_progress ) {
 
 		var xhr = new XMLHttpRequest(),
 			url = urlbase + "/" + buffers;
 
+		var length = 0;
+		
 		xhr.onreadystatechange = function() {
-
+			
 			if ( xhr.readyState == 4 ) {
 
 				if ( xhr.status == 200 || xhr.status == 0 ) {
@@ -103,7 +105,27 @@ THREE.Loader.prototype = {
 					alert( "Couldn't load [" + url + "] [" + xhr.status + "]" );
 
 				}
+						
+			} else if ( xhr.readyState == 3 ) {
+				
+				if ( callback_progress ) {
+				
+					if ( length == 0 ) {
+						
+						length = xhr.getResponseHeader( "Content-Length" );
+						
+					}
+					
+					callback_progress( { total: length, loaded: xhr.responseText.length } );
+					
+				}
+				
+			} else if ( xhr.readyState == 2 ) {
+				
+				length = xhr.getResponseHeader( "Content-Length" );
+				
 			}
+			
 		}
 
 		xhr.open("GET", url, true);