Question

我一直在寻找一种方法来跟踪jQuery .load()请求中加载的数据量。我想要的是一个在加载数据量增加时扩展的栏 - 一个进度条。此进度条应该收听.load()请求。

在我2个小时的研究中，我一直在寻找长时间合作，JSON等等。但我无法弄清楚我是否在正确的轨道上。

如何让进度条听取jQuery .load()请求并按比例增加加载数据？

Answer 1

您可以将.load()调用分成几个较小的AJAX请求，并在每个请求完成时更新进度条并启动下一个AJAX请求。没有可以绑定到ajax-progress的事件，服务器响应是“一次性”发送的，一旦收到所有响应，就会调用AJAX请求的success回调函数通过浏览器。

$(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();
                }
            }
        });
    }
});

Answer 2

当我们有这样的任务来跟踪长ajax过程的状态时我们拥有的是 - 请求另一页计算在服务器上存储或处理的实际数据，以百分比的值来响应以完成。所以

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);
     }
}

jQuery：跟踪加载请求进度

2 个答案: