Question

我有函数用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调用。我也尝试在函数开头显示加载并隐藏在函数的末尾，但是失败了。

怎么做？

Answer 1

你是怎么尝试加载的？在元素上使用ajaxStart / ajaxStop事件是实现所需内容的一种方法。它看起来像这样：

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

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

Answer 2

我认为答案实际上是其中几个的组合。我将从ajax开始，将加载图像显示为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.
  }
});

Answer 3

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

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

或者您可以使用beforeSend和Complete

$.ajax({
    url: uri,
    cache: false,
    beforeSend: function() {
        $('#image').show();
    },
    complete: function() {
        $('#image').hide();
    },
    success: function(html) {
        $('.info').append(html);
    }
});

Answer 4

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

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（）。

在制作多个AJAX请求时使用jQuery显示加载栏

4 个答案: