1

我有使用 jQuery 发出多个 AJAX 请求的功能，例如：

function() {
    $.ajax({
        url: "/url",
        data: {
            params: json_params,
            output: 'json'
        },
        async: false,
        success: function(res) {
            data1 = res
        }
    });

    $.ajax({
        url: "/url",
        data: {
            params: json_params,
            output: 'json'
        },
        async: false,
        success: function(res) {
            data2 = res;
        }
        return data1 + data2;
    });
}

当这个函数正在运行并且数据正在加载时，我想显示一个加载图像而不阻塞它。

我尝试使用 ajaxSend ajaxComplete 显示加载图标，但不起作用，因为我有多个 ajax 调用。我还尝试在函数开头显示加载并在函数结尾隐藏，但失败了。

这个怎么做？

4

4 回答 4

2

您究竟是如何尝试加载的？在元素上使用 ajaxStart/ajaxStop 事件是实现您想要的一种方式。它可能看起来像这样：

$('#loadingContainer')
.hide()  // at first, just hide it
.ajaxStart(function() {
    $(this).show();
})
.ajaxStop(function() {
    $(this).hide();
})
;

也许这对你有帮助，我以前经常使用它，它就像一个魅力..

于 2013-01-04T16:23:15.900 回答
1

我认为答案实际上是其中几个的组合。我会从 ajax start 开始，在 0 处显示加载图像（或者任何你想要的开始位置）。然后我会使用一个回调函数来增加加载栏并重新绘制它。

例如

 //when ajax starts, show loading div
$('#loading').hide().on('ajaxStart', function(){
    $(this).show();
});
//when ajax ends, hide div
$('#loading').on('ajaxEnd', function(){
    $(this).hide();
});
function ajax_increment(value) {
    //this is a function for incrementing the loading bar
    $('#loading bar').css('width', value);
}

//do ajax request
$.ajax({
  url:"", //url here 
  data: {params:json_params,output:'json'},
  async: false,
  success: function (res) {
    data1=res
    ajax_increment(20); //increment the loading bar width by 20
  }
});

$.ajax({
  url:"", //url here 
  data: {params:json_params,output:'json'},
  async: false,
  success: function (res) {
    data1=res
    ajax_increment($('loading bar').css('width') + 10); // a little more dynamic than above, just adds 10 to the current width of the bar.
  }
});
于 2013-01-04T16:34:32.530 回答
0

您应该能够绑定到开头，然后以以下内容结尾：

$('#loading-image').bind('ajaxStart', function() {
    $(this).show();
}).bind('ajaxStop', function() {
    $(this).hide();
});

或者您可以使用 beforeSend 和 on Complete

$.ajax({
    url: uri,
    cache: false,
    beforeSend: function() {
        $('#image').show();
    },
    complete: function() {
        $('#image').hide();
    },
    success: function(html) {
        $('.info').append(html);
    }
});
于 2013-01-04T16:19:36.113 回答
0

您可以尝试这样的事情：定义一个带有计数器的回调，并且回调在调用所需的次数后隐藏图像。

showLoadingImage();

var callbackCount = 0;
function ajaxCallback() {
  ++callbackCount;
  if(callbackCount >= 2) {
    hideImage();
  }
}

$.ajax({
  url:"/url", 
  data: {params:json_params,output:'json'},
  async: false,
  success: function (res) {
    data1=res
    ajaxCallback();
  }
});

$.ajax({
  url:"/url", 
  data: {params:json_params,output:'json'},
  async: false,
  success: function (res) {
    data2=res;  
    ajaxCallback();
  }
});

不过，这只是异步调用所必需的。你这样做的方式（你所有的 AJAX 调用都是同步的），你应该能够在你的外部函数结束之前调用 hideImage() 。

于 2013-01-04T16:23:31.423 回答