在执行 $.ajax 时显示加载图像

javascript jquery css

2022-08-30 04:31:28

我只是想知道如何显示指示异步请求正在运行的图像。我使用以下代码执行异步请求：

$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
});

有什么想法吗？

答案 1

当然，您可以在发出请求之前显示它，并在请求完成后将其隐藏：

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

我通常更喜欢更通用的解决方案，将其绑定到全局ajaxStart和ajaxStop事件，这样它就会显示给所有ajax事件：

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

答案 2

使用 ajax 对象的 beforeSend 并完成函数。最好在发送之前从内部显示 gif，以便将所有行为封装在单个对象中。请注意使用成功功能隐藏gif。如果请求失败，您可能仍需要隐藏 gif。为此，请使用“完成”函数。它看起来像这样：

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