顯示用ajax加載頁面時的加載時間

Question

我需要幫助顯示加載時間，當用戶加載一個頁面在一個div與Ajax與onchange。所以這是我的代碼，

因此，當頁面正在加載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與加載時間一起顯示。因此，當頁面加載完成後，用戶可以看多久的頁面加載..在此先感謝

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的全球性事件，如果你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).'); 
});