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

我想在Ajax调用中显示加载微调器。我试过spin.js库，但没有奏效。这是我的JavaScript函数，它使用Ajax调用。如何在Ajax调用上添加UI微调器？

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秒内显示微调。如何将动画微调器添加到我的页面中？

来源

2014-08-28 barbara

你不需要任何库来做到这一点。只需将图像添加到标记中，默认情况下将其隐藏起来，当您发送请求时将其显示出来，并在请求完成时将其隐藏起来。

的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%; 
}

来源

2014-08-28 11:54:17 Ahmad

我应该使用的z-index呢？ – barbara 2014-08-28 12:02:57

@barbara是的，如果有更高的Z指数 – Ahmad 2014-08-28 12:03:53

如何在显示gif的同时淡化网页？ – barbara 2014-08-28 12:12:15

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

回答

相关问题