2015-12-14 3 views
0

Я пытаюсь отобразить загрузочный ящик до того, как обновится карта флота. при загрузке документа он отлично работает, однако, когда я использую события кликов на кнопках, поле загрузки появляется только после обновления карты флота.показать окно загрузки перед диаграммой флота генерирует

следующие документы готовы к работе.

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

Как только начальная загрузка закончилась, я попробую отобразить окно загрузки при щелчках, но это изменяется только после обновления флота. После помещается в 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); 
    }); 

UPDATE

я добавил таймер, чтобы проверить, где она принимает очень долго. Фактически это занимает длительную обработку диаграммных данных, чем сама диаграмма. Если я пытаюсь показать окно загрузки перед обработкой данных диаграммы она по-прежнему не показывает

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 
+0

Вы можете посмотреть на некоторые из событий, которые они поддерживают, примеры для plotclick и plothover здесь https://github.com/flot/flot/blob/master/API.md#customizing-the-grid, а также то, что вы можете подключить здесь: https://github.com/flot/flot/blob/master/API.md#hooks ie bindEvents и draw – Pricey

+0

нет подходящего примера, поэтому я не уверен, как это сделать? – shorif2000

+0

Посмотрите на примеры кода, перечисленные под крючками https://github.com/flot/flot/blob/master/API.md#hooks Существует быстрый пример функции hellohook (plot, canvascontext) {alert («привет! «); }; var plot = $ .plot (placeholder, data, {hooks: {draw: [hellohook]}}); 'который будет показывать окно предупреждения всякий раз, когда происходит событие« draw »... Существует список Крюков от 1 до 8, предположительно вы хотите, чтобы «Установить данные» или «Настройка сетки», что-то подобное, и иметь функцию, которая отображает наложение – Pricey

ответ

0

Я установил время ожидания 1 сек, чтобы загрузочная коробка появляться, как указано в этом post

Смежные вопросы