jQuery Ajax 异步加载显示等待效果代码分享

下面是“jQuery Ajax 异步加载显示等待效果代码分享”的完整攻略。

1. 示例一：使用 spin.js 插件实现等待效果

1.1 简介

spin.js 是一个小巧精致的 JavaScript 加载动画库，可用于显示等待效果。它不依赖于任何其他库，适用于所有主流浏览器，支持自定义样式和选项。

1.2 代码实现

使用 spin.js，需要先在 HTML 页面中引入相关的 CSS 和 JS 文件：

<link rel="stylesheet" href="path/to/spin.css">
<script src="path/to/spin.js"></script>

然后，在 JavaScript 代码中，使用如下代码创建一个滚动条对象：

var spinner = new Spinner().spin();

最后，在使用 jQuery 的 $.ajax() 函数发起异步请求时，可以通过 beforeSend 选项设置发送请求前的回调函数，在回调函数中展示等待效果：

$.ajax({
  url: "your/url",
  type: "GET",
  beforeSend: function() {
    $("#loading").show(); // 显示等待效果
    spinner = new Spinner().spin();
    $("#loading").append(spinner.el);
  },
  success: function(data) {
    $("#loading").hide(); // 隐藏等待效果
    // 处理返回数据
  }
});

1.3 示例说明

在这个示例中，我们使用了 spin.js 插件实现了等待效果，使用了 jQuery 的 $.ajax() 函数发起了异步请求，展示了 spin.js 插件的基本使用方法。

2. 示例二：使用 CSS3 实现等待效果

2.1 简介

CSS3 的动画效果可以让我们实现各种各样的等待效果，而且不需要依赖任何其他库或插件。在这个示例中，我们会使用 CSS3 中的动画效果来实现等待效果。

2.2 代码实现

首先，在 HTML 中，定义一个用于展示等待效果的 DIV：

<div id="loading"><div class="spinner"></div></div>

然后，在 CSS 中，定义一个用于实现等待效果的类 spinner：

.spinner {
  margin: 0;
  padding: 0;
  width: 50px;
  height: 50px;
  position: relative;
}

.spinner:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #fff;
  border-top-color: #42b983;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

最后，在使用 jQuery 的 $.ajax() 函数发起异步请求时，可以通过 beforeSend 选项设置发送请求前的回调函数，在回调函数中展示等待效果：

$.ajax({
  url: "your/url",
  type: "GET",
  beforeSend: function() {
    $("#loading").show(); // 显示等待效果
  },
  success: function(data) {
    $("#loading").hide(); // 隐藏等待效果
    // 处理返回数据
  }
});

2.3 示例说明

在这个示例中，我们使用了 CSS3 中的动画效果实现了等待效果，使用了 jQuery 的 $.ajax() 函数发起了异步请求，展示了 CSS3 动画效果的基本使用方法。

以上是“jQuery Ajax 异步加载显示等待效果代码分享”的完整攻略，希望能够帮助你。