在flot圖表生成之前顯示加載框

Question

我試圖在flot圖表更新之前顯示加載框。在文檔加載它工作正常，但是當我使用按鈕上的點擊事件加載框只出現在更新後的圖表。

下面的文檔就緒作品。

function showLoadGraph() { 
    $("#loading-div-background").removeAttr('style'); 
    $("#loading-div-background").css({display:"block"}); 
    console.log("showLoadGraph"); 
} 

function hideLoadGraph() { 
    $("#loading-div-background").css({display:"none"}); 
    console.log("hideLoadGraph"); 
} 
$(document).ready(function() { 
    //api.loadActivityIndicator(); 
    //$("#loading-div-background").css({ opacity: 0.8 }); 

    showLoadGraph(); 
... 
$.ajax({ 
     url: 'flot_network_ajax.php', 
     type: 'GET', 
     data: 'action=network_availability&' + params, 
     dataType: 'json', 
     success: function(data) { 
      ajax_data = data.rows; 

      //process data 
      var availability_object = loopInitial(data.rows,"sevendays",""); 

      var json_object = calculateAvailability(availability_object); 

      rePlot(json_object); 
      api.hideActivityIndicator(); 
      hideLoadGraph(); 
      }, 
     error: function(e) { 
      //called when there is an error 
      console.log(e.responseText); 
     } 
    }); 

初始加載結束後，我嘗試在點擊事件上顯示加載框，但它只在flot更新後纔會更改。以下是放置在

我已經加入定時器來確認它正在很長doc.ready

//today click event 
    $("#group_period input").change(function(){ 
     showLoadGraph(); 
     var id = $(this).attr('id'); 
     var to = false; 
     if (id == "yesterday" || id == "lastmonth") 
      to = true; 
     var availability_object = loopInitial(ajax_data,id,to);  
     var json_object = calculateAvailability(availability_object); 
     rePlot(json_object); 
    }); 

更新。實際上它需要比圖表本身更長的處理圖表數據。如果我試圖表現出圖表數據處理之前裝載盒仍然沒有顯示

start sevendays process: 1450369631807 
Object {vfvftfvf: Array[0], vfvf: Array[0], tfvf: Array[0]} 
finish sevendays process: 1450369639141 
process sevendays duration : 7.334s 
start graph render: 1450369639141 
[Object] 
finish graph render: 1450369639179 
process graph render duration : 0.038s 

Answer 1

我設置1秒的超時允許出現裝載盒在本post