AJAX：为jQuery ajax .load()添加加载动画

在本文中，我们将介绍如何为jQuery的ajax .load()方法添加一个加载动画。AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，通过后台与服务器进行数据交互的技术。jQuery是一种流行的JavaScript库，提供了对AJAX的简化和便捷的操作。其中的.load()方法可以加载并显示远程文件的内容，但在加载过程中没有任何提示给用户。为了改善用户体验，我们可以添加一个加载动画来显示加载的进度。

阅读更多：AJAX 教程

1. 创建加载动画

首先，我们需要创建一个加载动画。可以使用CSS和JavaScript来实现。这个加载动画可以是旋转的圆圈、进度条、脉动的点等等。下面是一个简单的示例，使用CSS的动画效果来创建一个旋转的圆圈加载动画：

<style>
.loading {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

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

这段CSS代码定义了一个名为”loading”的div元素，并应用了旋转加载动画。它使用了关键帧动画@keyframes来实现旋转效果。

2. 添加加载动画

接下来，我们将加载动画应用到jQuery的.load()方法中。在调用.load()方法之前显示加载动画，加载完成后隐藏加载动画。

$(document).ajaxStart(function() {
  $("#loading").show();
});

$(document).ajaxStop(function() {
  $("#loading").hide();
});

$("#target").load("remote-file.html");

这段代码中，我们使用了jQuery的.ajaxStart()和.ajaxStop()方法来设置ajax请求开始和结束时的回调函数。在请求开始时，我们显示加载动画；在请求结束时，我们隐藏加载动画。然后，我们使用.load()方法加载远程HTML文件，并将其内容显示在id为”target”的元素中。

3. 完整示例

下面是一个完整的示例，演示了如何为jQuery的.load()方法添加加载动画：

<!DOCTYPE html>
<html>
<head>
<style>
.loading {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>

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

<h2>Welcome to My Website</h2>

<p>Click the button below to load content:</p>
<button onclick="loadContent()">Load Content</button>

<div id="target"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
function loadContent() {
   $("#loading").show();$ ("#target").load("remote-file.html", function() {
    $("#loading").hide();
  });
}
</script>

</body>
</html>

在这个示例中，我们只需要点击”Load Content”按钮，就可以加载远程文件并显示加载动画，加载完成后自动隐藏加载动画。