异步AJAX请求时如何显示加载图片？

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

使用 $.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();
});

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

以上是异步AJAX请求时如何显示加载图片？的详细内容。更多信息请关注PHP中文网其他相关文章！