如何在 AJAX 请求中实现 jQuery 微调器图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19445639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement a jQuery spinner image in an AJAX request
提问by Zabs
I have an jQuery AJAX request which I want to have display an ajax spinner gif while the request loads and then disappear once the request is successful, can anyone suggest the best method to implement this into my jquery code below:
我有一个 jQuery AJAX 请求，我想在请求加载时显示一个 ajax spinner gif，然后在请求成功后消失，有人可以建议将其实现到我下面的 jquery 代码的最佳方法：
function updateCart( qty, rowid ){
$.ajax({
type: "POST",
url: "/cart/ajax_update_item",
data: { rowid: rowid, qty: qty },
dataType: 'json',
success: function(data){
render_cart(data);
}
});
}
回答by Praveen
- Get a loader gif from ajax loader(GIF images)
- Place this image where you want to show/hide.
- Before the ajax, show this image.
- Once completed, hide the image
- 从ajax 加载器（GIF 图像）获取加载器 gif
- 将此图像放在要显示/隐藏的位置。
- 在ajax之前，显示这个图像。
- 完成后，隐藏图像
function updateCart( qty, rowid ){
$('.loaderImage').show();
$.ajax({
type: "POST",
url: "/cart/ajax_update_item",
data: { rowid: rowid, qty: qty },
dataType: 'json',
success: function(data){
render_cart(data);
$('.loaderImage').hide();
},
error: function (response) {
//Handle error
$("#progressBar").hide();
}
});
}
回答by Sachin Mour
var $loading = $('#loadingDiv').hide();
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
where '#loadingDiv' is the spinner gif covering the part of the page or the complete page.
其中 '#loadingDiv' 是覆盖页面部分或整个页面的微调 gif。
回答by Carlos Landeras
I do it showing/hiding a div with gif image. It works like a charm:
我这样做是用 gif 图像显示/隐藏一个 div。它的作用就像一个魅力：
<script type="text/javascript">
$("#progressBar").corner();
$("#progressBar").show();
jQuery.ajax({
url: "../Nexxus/DriveController.aspx",
type: "GET",
async: true,
contentType: "application/x-www-form-urlencoded",
//data: param,
success: function (response) {
//Manage your response.
//Finished processing, hide the Progress!
$("#progressBar").hide();
},
error: function (response) {
alert(response.responseText);
$("#progressBar").hide();
}
});
</script>
回答by Timur Gafforov
On Preloaders.netyou can find a very open code along with all the explanations both in pure JavaScript and JQuery formats. You can get the loader images there too
在Preloaders.net 上，您可以找到非常开放的代码以及纯 JavaScript 和 JQuery 格式的所有解释。您也可以在那里获取加载程序图像
