我发现很多操作系统帖子都可以解决我的问题,但没有人适合我......
我尝试过:
<div class="ibox-content">
<div id="carregando" class="text-center" style="display:none">
<img src="~/Imagens/logo.png" />
</div>
<div id="container" style="height: 460px; margin: 0 auto"></div>
</div>
我的 JS 在按钮点击时被调用,该按钮调用了如下所示的函数:
$("#atualiza").click(function () {
$(document).ajaxStart(function () {
$("#carregando").show();
});
$.ajax({
url: '/Portaria/AtendOperador',
dataType: "json",
type: "GET",
data: { 'data1': data1, 'data2': data2, 'evento': evento, 'cuc': cuc, 'conta': conta },
async: false,
cache: false,
delay: 15,
success: function (data) {
var Categories = new Array();
var Series = new Array();
for (var i in data) {
Categories.push(data[i].Operador);
Series.push(data[i].Fechados);
}
var CategArray = JSON.parse(JSON.stringify(Categories));
atendOperador(CategArray, Series);
$(document).ajaxStop(function () {
$("#carregando").hide();
});
},
error: function (xhr) {
alert('error');
$(document).ajaxStop(function () {
$("#carregando").hide();
});
}
});
});
function atendOperador(CategArray, Series) {
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
}
});
}
即使我输入了代码:
$( document ).ajaxStart(function() {
$( "#carregando" ).show();
});
图像仅在ajax完成后才出现。使用显示和隐藏这两个 block ,图像没有出现,所以,我尝试删除隐藏 block ,我可以看到问题是:加载ajax时显示和隐藏同时发生,如下所示:
我点击了按钮并注意到发生的情况如下:http://prntscr.com/ars97n
几秒钟后,Ajax 加载数据并一起显示图标和数据:http://prntscr.com/ars9xq
最佳答案
尝试 $("#carregando").hide();
而不是 $(document).ajaxStop(function ()$("#carregando").hide(); });
编辑:ajaxStart 和 ajaxEnd 是事件处理程序。我认为它们应该在点击功能之外注册。像这样的事情:
$(document).ready(function(){
$(document).ajaxStart(function () {
$("#carregando").show();
});
$(document).ajaxStop(function () {
$("#carregando").hide();
});
$("#atualiza").click(function () {
/* all your code here except for the ajaxStart/ajaxStop portion */
});
});
关于javascript - 单击时显示 Gif,Ajax 成功后隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36604483/