bar*_*ara 3 javascript spinner jquery-ui-spinner
我想在 Ajax 调用上显示加载微调器。我试过spin.js库，但它没有 \xe2\x80\x99 工作。这是我的 JavaScript 函数，它使用 Ajax 调用。
function sendRequest() {\n $.ajax({\n url: \'/spinner\',\n type: \'get\',\n contentType: "application/json",\n success: function (resp) {\n $(\'#spinner\').append(resp.data);\n console.log(resp.data);\n },\n error: function (){\n console.log("Oops!");\n }\n }\n );\n}\n我的 HTML 代码：
\n\n<html>\n<head>\n <link type="text/css" rel="stylesheet" href="../resources/css/style.css"/>\n <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">\n <script type="text/javascript" charset="utf-8" src="../resources/js/jquery.js"></script>\n <script type="text/javascript" charset="utf-8" src="../resources/js/send.js"></script>\n <script type="text/javascript" charset="utf-8" src="../resources/js/jquery.spin.js"></script>\n <script type="text/javascript" charset="utf-8" src="../resources/js/spin.js"></script>\n</head>\n<body>\n <button id="butt" class="pure-button pure-button-primary" onclick="sendRequest()">Press me!</button>\n <div id="spinner">Greeting!</div>\n</body>\n</html>\n-CSS-
\n\n#spinner {\n text-align: center;\n font-size: 100px;\n color: #FFFFFF;\n margin: 25px 350px 350px 350px;\n background: #ad9ea4;\n position: relative;\n padding: 50px;\n}\n在服务器端我有一点延迟（5秒）。实际上我想展示旋转器这 5 秒。如何将动画微调器添加到我的页面中？
\n您不需要任何库来执行此操作。只需将图像添加到标记中，默认隐藏它，在发送请求时显示它，并在请求完成时隐藏它。
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();
});
}
超文本标记语言
<img src="path/to/img.png" id="spinner"/>
CSS（您可能需要编辑它）
#spinner{
display: none;
position: absolute;
left: 50%;
top: 20%;
}
| 归档时间： |
|
| 查看次数： |
8813 次 |
| 最近记录： |