在执行$ .ajax时显示加载图像 [英] Show loading image while $.ajax is performed

问题描述

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

I am just wondering how to show an image that indicates that the async request is running. I use the following code to perform a async request:

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

任何想法？

推荐答案

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

You can, of course, show it before making the request, and hide it after it completes:

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

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

I usually prefer the more general solution of binding it to the global ajaxStart and ajaxStop events, that way it shows up for all ajax events:

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

这篇关于在执行$ .ajax时显示加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！