englercj / Jquery Ajax Progress

Jquery Ajax Progresss

A simple patch to jQuery that will call a 'progress' callback, using the XHR.onProgress event

Usage

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.

Notes

• This will not work using the file:// protocol, see XMLHttpRequest - Monitoring Progress for more info.