如何使用 jQuery 在 AJAX 请求期间显示加载图像？

在 Ajax 执行期间显示加载图像

为了指示异步请求执行，通常需要显示加载图像。让我们探索如何使用 jQuery 的 $.ajax 方法来实现此目的。

引入图像

所需的行为包括显示图像以指示正在进行的请求。这是一个简单的 HTML 设置：

<img>

AJAX 请求自定义

要使用所需的可视化增强 $.ajax 请求，我们必须包含以下内容：

• 在请求之前显示加载图像：使用fadeIn() 或 show() 方法使加载图像可见。
• 完成后隐藏加载图像：使用 fadeOut() 或 hide() 方法在完成后删除加载图像请求完成。

自定义AJAX请求：

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

基于事件的方法

另一种方法利用全局 ajaxStart 和 ajaxStop jQuery 事件。这允许所有 AJAX 事件的异步可视化：

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

通过实现这些技术，开发人员可以有效地显示加载图像，以在异步请求期间提供视觉反馈。

以上是如何使用 jQuery 在 AJAX 请求期间显示加载图像？的详细内容。更多信息请关注PHP中文网其他相关文章！