Question

我想在更新flot图表之前显示加载框。在文档加载时，它工作正常但是当我在按钮上使用点击事件时，加载框仅在邮件图表更新后才会出现。

以下doc准备工作。

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

中

在flot chart生成之前显示加载框

1 个答案: