在执行函数之前显示加载图标

我试图在执行函数之前显示加载图标，但我没有线索如何执行此操作。在执行函数之前显示加载图标

我的代码：

$(".chartType").on("click", function(event){ 
    $("#wrapper").addClass("loading");  
    changeChartType($(this).attr("value"));  
    $("#wrapper").removeClass("loading"); 
});

它显示了一个加载图标（如果removeClass（）注释掉）图表实际上已经被加载后。如果有人知道解决方案，请立即告诉我。

我试过使用setTimeOut（），jQuery的时候，然后做，但似乎没有任何工作。

我使用Google的可视化图表来显示各种图表。我可以通过点击图标在图表之间切换。

之后，上面的函数将被执行。

功能changeChartType（）：

function changeChartType(typePar){ 
    chartType = typePar; 
    chart = new google.visualization[chartType](chartDiv); 
    drawChart(); 
}

而且在drawChart它只是调用chart.draw（）; 这需要一段时间，因此我想显示一个加载图标。

问题不在于删除加载图标，而是通过添加类来显示加载图标。目前它在绘制图表后添加该类。也许有一个同步这个。

来源

2013-05-08 MmynameStackflow

如果'changeChartType（）'是异步的而不修改'changeChartType（）'，那么你不能这样做。请提供'changeChartType'的功能。为什么使用'$（this）.attr（“value”）而不是'$（this）.val（）'或'this.value'？ – 2013-05-08 14:26:20

如果你改变'img'，你可以使用'load（）'函数。 – shuaqiu 2013-05-08 14:27:47

新手错误我想，更多信息在一分钟 – MmynameStackflow 2013-05-08 14:28:03

你的所有功能都是同步的。这意味着他们在很短的时间内陆续运行。异步函数需要时间和回调，所以你可以在完成之后做些事情。例如：

$(".chartType").on("click", function(event){ 
    $("#wrapper").addClass("loading");  
    $("element").on("load",function(){ 
     $("#wrapper").removeClass("loading"); 
    });  
});

“removeClass” 功能将 “元件” 后运行时加载。

来源

2013-05-08 14:36:53

是的，我知道，但加载图标还没有。 – MmynameStackflow 2013-05-08 14:39:23

您的包装在changeChartType函数完成之前删除行运行。如果不以某种方式包装到上一个函数中，removeClass函数会在读取完成后立即触发，这可能是在前一个函数完成之前。

$(".chartType").on("click", function(event){ 
$("#wrapper").addClass("loading"); 
$.when({ changeChartType($(this).attr("value")) }).done(
    $("#wrapper").removeClass("loading"); 
); });

我还没有测试过这个，但是打错了，这个想法应该工作。

这里的时候/完成文档的链接：http://api.jquery.com/jQuery.when/

来源

2013-05-08 14:37:39

Downvoted ????为了什么？上帝我有时候讨厌这个网站。 – 2013-05-08 14:42:31

我试过这个，但没有低估这个。 – MmynameStackflow 2013-05-08 14:44:49

的谷歌图表可视化API的draw方法是异步的，这又是对整个函数链异步。你需要做的就是倾听由所有这些混乱所引发的事件并采取相应的行动。该事件被定义并描述为here。

为了达到这个目的，您需要对代码进行相当多的修改。这里是这样做的最简单的方法：

$(".chartType").on("click", function(event){ 
    $("#wrapper").addClass("loading"); 
    var chart = new google.visualization[$(this).attr("value")](chartDiv); 
    google.visualization.events.addListener(chartDiv, 'ready', function() { $("#wrapper").removeClass("loading") }); 
    chart.draw(); 
});

这应该工作，但它假定chartDiv是在范围之内。

来源

2013-05-08 14:39:24

Nop，我已经试过这个。 – MmynameStackflow 2013-05-08 14:45:47

@MmynameStackflow：如果它不起作用 - 它会失败吗？其实，你可以从你当前的代码中构建一个小提琴，这样我们都可以解决它吗？ – 2013-05-08 14:49:04

问题不在于删除部分，而在于添加部分。 – MmynameStackflow 2013-05-08 14:51:16

在执行函数之前显示加载图标

回答

相关问题