2

I've been looking for a way to track the amount of data loaded in a jQuery .load() request. What I want is a bar that expands when the amount of loaded data increases – a progress bar. And this progress bar should listen to the .load() request.

Throughout my 2 hours of research, I've been as far as looking upon long-time pooling, JSON, etc. But I can't figure out if I'm on the right track or not.

How do I make a progress bar listen to a jQuery .load() request and increase proportionally with the amount of loaded data?

Chaos
  • 11,213
  • 14
  • 42
  • 69
Frederik Brinck Jensen
  • 523
  • 1
  • 7
  • 14

2 Answers2

4

You can break your .load() call into several smaller AJAX requests and at the completion of each request, update the progress bar and start the next AJAX request. There is no event you can bind to like ajax-progress, the server response is sent "all-at-once" and the success callback function of the AJAX request is called once all of the response has been received by the browser.

$(function () {
    var total    = 5,
        current  = 1,
        response = [];
    function do_ajax() {
        $.ajax({
            url : 'server-side.php?page=' + current
            success : function (serverResponse) {
                response[response.length] = serverResponse;
                $('#progress-bar').text(current + ' of ' + total + ' are done');
                current++;
                if (current <= total) {
                    do_ajax();
                }
            }
        });
    }
});
Jasper
  • 75,717
  • 14
  • 151
  • 146
0

When we had such a task to track status of long ajax process.
What we have - is request to another page counting actual data stored or processed on server, responding with value in percent to complete. So

var stillLoading = true;
$.get('long-process-url', function(data){
    stillLoading = false;
    //code on success
});

checkStatus()    

function checkStatus() {
    if(stillLoading) {
        setTimeout(function(){
            $.get('get-stats-of-process-url', function(data){
                $('#percent').val(data);
                checkStatus();
            }
        }, 1000);
     }
}
profuel
  • 128
  • 5