在异步请求期间显示加载图像

使用 $.ajax 执行异步请求可能会由于缺乏可见的指示而导致混乱正在进行的过程。本文探讨了在此类请求期间显示加载图像的技术。

首先，提供的代码片段对 URL 执行异步请求，并将接收到的 HTML 附加到类为“info”的元素。要显示加载图像，可以使用 'id' 为 'loading-image' 的图像元素。

一种方法是在发出请求之前显示图像并在完成后隐藏它：

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

更通用的方法是将加载图像绑定到全局 ajaxStart 和 ajaxStop 事件。这样，图像对于所有异步请求都是可见的：

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

这些技术为正在进行的异步请求提供了用户友好的指示，从而增强了用户体验。