Progressive Loader using jQuery

ProgressiveLoaderClass.js

// require jQuery

;(function(){
	var _p, _init, _done, _fail, _progress, _complete, _data, _index, _item, _jqXHR, _responses;

	function ProgressiveLoader() { }
	_p = ProgressiveLoader.prototype;

	_p.init = function(callback) {
		_init = callback;
	}
	_p.done = function(callback) {
		_done = callback;
	}
	_p.fail = function(callback) {
		_fail = callback;
	}
	_p.progress = function(callback) {
		_progress = callback;
	}
	_p.complete = function(callback) {
		_complete = callback;
	}

	_p.load = function(data) {
		_data = data;
		_responses = [];
		
		_load(0);
	}

	function _load(index) {
		_index = index;
		
		if (_index >= _data.length) {
			_complete(_responses);
			return;
		}

		_item = _data[_index];

		_jqXHR = $.ajax({
			type: 'GET',
			dataType: 'json',
			url: _item.url,
			data: _item.params,
			xhr: function() {
				var xhr = new window.XMLHttpRequest();
				
				xhr.addEventListener("progress", function(e) {
					if (e.lengthComputable) {  
						var percent = evt.loaded / evt.total;
						_progress(percent, _index, _item);
					} else {
						console.log('[ProgressiveLoader] Progress no computable.');
					}
				}, false);

				return xhr;
			}
		})
		
		_jqXHR.fail(function(response){
			_fail(response, _index, _item);

			_responses.push(response);
			_load(_index + 1);
		});
		
		_jqXHR.done(function(response){
			_done(response, _index, _item);
			
			_responses.push(response);
			_load(_index + 1);
		});

		if ($.isFunction(_init)) {
			_init(_jqXHR, _index, _item);
		}
	}

	window.ProgressiveLoader = ProgressiveLoader;
})();

ProgressiveLoaderTest.js

// En la variable 'data' tenemos las URLs que cargaremos progresivamente.

var URLBase = 'https://query.yahooapis.com/v1/public/yql';
var data = [
	{
		url: URLBase,
		params: {
			format: 'json',
			q: 'select wind from weather.forecast where woeid in (select woeid from geo.places(1) where text="chicago, il")'
		}
	},
	{
		url: URLBase,
		params: {
			format: 'json',
			q: 'select item.condition from weather.forecast where woeid = 2487889'
		}
	},
	{
		url: URLBase,
		params: {
			format: 'json',
			q: 'select item.condition.text from weather.forecast where woeid in (select woeid from geo.places(1) where text="dallas, tx")'
		}
	},
	{
		url: URLBase,
		params: {
			format: 'json',
			q: 'select astronomy.sunset from weather.forecast where woeid in (select woeid from geo.places(1) where text="maui, hi")'
		}
	},
	{
		url: URLBase,
		params: {
			format: 'json',
			q: 'select * from weather.forecast where woeid in (select woeid from geo.places(1) where text="greenland")'
		}
	}
];


var pLoader = new ProgressiveLoader();

// Se ejecuta por cada URL
pLoader.init(function(jqXHR, index, dataItem) {
	console.log('INIT', jqXHR, index, dataItem);
});

// Se ejecuta por cada URL
pLoader.done(function(response, index, dataItem) {
	console.log('DONE', response, index, dataItem);
});

// Se ejecuta por cada URL
pLoader.fail(function(response, index, dataItem) {
	console.log('FAIL', response, index, dataItem);
});

// Se ejecuta por cada URL
pLoader.progress(function(percent, index, dataItem) {
	console.log('PROGRESS', Math.round(percent * 100) + '%', index, dataItem);
});

// Se ejecuta al terminar de cargar todas las URLs
pLoader.complete(function(responses /* array */) {
	console.log('COMPLETE', responses);
});

// Inicia las cargas
pLoader.load(data);