A simple patch to jQuery that will call a 'progress' callback, using the XHR.onProgress event
Simply include the script on your page:
<script src="js/jquery.ajax-progress.js"></script>Then, whenever you make an ajax request, just specify a progress callback:
$.ajax({
method: 'GET',
url: 'data/bird.json',
dataType: 'json',
success: function() { },
error: function() { },
progress: function(e) {
//make sure we can compute the length
if(e.lengthComputable) {
//calculate the percentage loaded
var pct = (e.loaded / e.total) * 100;
//log percentage loaded
console.log(pct);
}
//this usually happens when Content-Length isn't set
else {
console.warn('Content Length not reported!');
}
}
});You can see it in action on the demo.html page.
- This will not work using the
file://protocol, see XMLHttpRequest - Monitoring Progress for more info.