使用ajax加载页面时显示加载时间

Question

当用户使用带有onchange的ajax在div中加载页面时，我需要显示加载时间的帮助。 这是我的代码

因此，当页面加载时，gif显示正常，但时间没有显示，

<div class="col-xs-3" style="display:none;" id="wait"><img src="../img/loading_dark.gif" alt="" style="width: 900px; height: 32px; position: relative;"/>
        <div id="load_time"></div>
</div>

还有我的ajax代码

var beforeload = (new Date()).getTime();

        $('#jobname').on('change', $(this), function () {
            var job = $('#jobname').val();
            $.ajax({
                type: 'POST',
                url: "divpages/show_gen_overview_report.php",
                data: {job: job},
                beforeSend: function ()
                {
                    $("#wait").css("display", "block");
                        var afterload = (new Date()).getTime();
                        seconds = (afterload-beforeload) / 1000;
                    $('#load_time').text('Page load time ::  ' + seconds + ' sec(s).');
                },
                success: function (response, textStatus, jqXHR) {
                    $("#wait").css("display", "none");
                    $('#FinalOverviewReportContentDiv').html(response);
                }
            });
        });

我想做的是页面加载时，gif与加载时间一起显示。 所以，当页面加载完成时，用户可以看到页面加载了多长时间。

Answer 1

考虑以下代码段：

$('#jobname').on('change', $(this), function () {
    var job = $('#jobname').val();
    var beforeload = new Date();// initialize before sending ajax call not globally
    $.ajax({
        type: 'POST',
        url: "divpages/show_gen_overview_report.php",
        data: {job: job},
        beforeSend: function ()
        {
            $("#wait").css("display", "block");
        },
        success: function (response, textStatus, jqXHR) {
            $("#wait").css("display", "none");
            var afterload = new Date();
            seconds = (afterload-beforeload) / 1000; //calculate in success function not beforesend
            $('#load_time').text('Page load time ::  ' + seconds + ' sec(s).');
            $('#FinalOverviewReportContentDiv').html(response);
        }
    });
});

Answer 2

你的逻辑是错误的， beforesend变量必须在beforeSend要设置handler和afterload应该是success处理程序。

如果您不想在所有AJAX请求中都发生这种情况，也可以使用AJAX全局事件：

var beforeSend = -1;
$.ajaxSend(function() {
  beforeSend = Date.now();

  $("#wait").css("display", "block");
});
$.ajaxComplete(function() {
  var afterSend = Date.now();
  var seconds = (afterSend-beforeSend) / 1000;
  $('#load_time').text('Page load time:  ' + seconds + ' sec(s).');
});