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

问题描述：

我需要帮助显示加载时间，当用户加载一个页面在一个div与Ajax与onchange。所以这是我的代码，显示用ajax加载页面时的加载时间

因此，当页面正在加载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); 
       } 
      }); 
     });

什么，我想do是在页面加载时，gif与加载时间一起显示。因此，当页面加载完成后，用户可以看多久的页面加载..在此先感谢

答

考虑下面的代码片段：

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

AMAZING ..谢谢 –

很高兴它的工作。享受脚本:-)。 – Manwal

答

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

您也可以使用AJAX的全球性事件，如果你wan't它在所有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).'); 
});

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

相关推荐