在图表生成之前显示加载框

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

在图表生成之前显示加载框

show loading box before flot chart generates

jquery

jquery-ui

flot