随着 Web 开发技术的进步，Web 应用程序正在迅速缩小与桌面应用程序的用户体验差距。让用户知道应用程序何时繁忙是一种非常常见的做法。最常见的方法之一是显示加载指示器或旋转的 gif。这将让用户知道应用程序正在运行，并且在任务完成之前他或她不会尝试刷新或按其他按钮。
要实现这一点，在服务器启动任务之前，我们必须显示我们的微调器或任何我们想要显示的加载动画，然后在任务完成（成功或不成功）时隐藏动画。我将向您展示如何使用 jQuery 和 AngularJS 来做到这一点。
在 jQuery 中实现加载动画
让我们从 jQuery 开始。每当我从表单向服务器发布内容时，我都想显示一个微调器，直到收到响应为止。假设我们有这样一个表格：
<form id="subscriptionForm">
<label for="email">Your email</label>
<input type="email" id="email" name="email" />
</form>
我在 html 的某处有一个带有微调器 gif img 的 div
<form id="subscriptionForm">
<label for="email">Your email</label>
<input type="email" id="email" name="email" />
</form>
一开始，我需要隐藏它，所以你可以放置一个 css 样式的 display:none 或使用 jquery 或任何你最喜欢的方式隐藏它。
有几种形式可以确定如何显示和隐藏微调器。一种方法是绑定到 subscriptionForm ajaxSend 和 ajaxComplete 事件以分别显示和隐藏微调器。
<form id="subscriptionForm">
<label for="email">Your email</label>
<input type="email" id="email" name="email" />
</form>
这将使微调器在 ajax 请求从该表单开始时显示，并在请求完成时消失。
如果您需要为页面中发出的每个 ajax 请求显示微调器，那么您可能需要将事件绑定到 DOM。
您还可以通过应用这样的样式并将类 ajax-loader 添加到微调器 img 元素，使微调器显示为模式对话框：
<form id="subscriptionForm">
<label for="email">Your email</label>
<input type="email" id="email" name="email" />
</form>
这将使微调器显示在模态对话框中，并防止用户在此请求完成之前启动任何其他请求。
在 AngualarJS 应用程序中实现加载动画
在 AngularJS 中实现加载动画的策略略有不同，需要一些设置。为了捕获请求的开始和结束，在 AngularJS 中我们必须为请求和响应创建 http 拦截器 。拦截器将在将请求交给服务器之前拦截请求，这样我们就可以在将其交给客户端之前显示我们的微调器和响应，这样我们就可以隐藏微调器。
要获取拦截器，我们需要通过匿名工厂注册它们，在请求和响应函数内部，我们需要分别显示和隐藏 spinner 的 div。
<form id="subscriptionForm">
<label for="email">Your email</label>
<input type="email" id="email" name="email" />
</form>
拦截器是 AngularJS 的一个有用部分，它可用于在发出请求之前或收到响应之后进行多种验证（身份验证验证等），这里的任务之一是在以下情况下显示和隐藏微调器一个请求已经开始并完成（请注意，为了代码的简单性，我省略了检查请求错误的函数）。
为了使示例更清楚，我在 Plunker 中创建了一个示例拦截器演示。你可以在这里看到它： http://plnkr.co/edit/hAg1T8sdsLq5c61iW97f ?p=preview
这是一篇简单的文章，向您展示了如何在 AngularJS 和 jQuery 中实现加载动画。当然，您的场景可能有额外的、更复杂的要求，但这应该作为设置它的基础。