如何在 Ajax 调用中添加 UI 微调器？

Question

我想在 Ajax 调用中显示加载微调器。我尝试了spin.js 库，但没有成功。这是我的 JavaScript 函数，它使用 Ajax 调用。

function sendRequest() {
    $.ajax({
            url: '/spinner',
            type: 'get',
            contentType: "application/json",
            success: function (resp) {
                $('#spinner').append(resp.data);
                console.log(resp.data);
            },
            error: function (){
                console.log("Oops!");
            }
        }
    );
}

我的 HTML 代码：

<html>
<head>
    <link type="text/css" rel="stylesheet" href="../resources/css/style.css"/>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
    <script type="text/javascript" charset="utf-8" src="../resources/js/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="../resources/js/send.js"></script>
    <script type="text/javascript" charset="utf-8" src="../resources/js/jquery.spin.js"></script>
    <script type="text/javascript" charset="utf-8" src="../resources/js/spin.js"></script>
</head>
<body>
    <button id="butt" class="pure-button pure-button-primary" onclick="sendRequest()">Press me!</button>
    <div id="spinner">Greeting!</div>
</body>
</html>

-CSS-

#spinner {
    text-align: center;
    font-size: 100px;
    color: #FFFFFF;
    margin: 25px 350px 350px 350px;
    background: #ad9ea4;
    position: relative;
    padding: 50px;
}

在服务器端我有一点延迟（5 秒）。实际上我想在这 5 秒内显示微调器。如何将动画微调器添加到我的页面中？

Answer 1

您不需要任何库来执行此操作。只需将图像添加到您的标记中，默认情况下将其隐藏，在您发送请求时显示它并在您的请求完成时隐藏它。

JavaScript

 function sendRequest() {
      // show spinner
      $('#spinner').show();
      $.ajax({
          url: '/spinner',
          type: 'get',
          contentType: "application/json",
          success: function (resp) {
              $('#spinner').append(resp.data);
              console.log(resp.data);
          },
          error: function () {
              console.log("Oops!");
          }
      }).done(function () {
          // hide spinner
          $('#spinner').hide();
      });
  }

HTML

<img src="path/to/img.png" id="spinner"/>

CSS（您可能需要编辑）

#spinner{
  display: none;
  position: absolute;
  left: 50%;
  top: 20%;
}