如何在AJAX请求中实现jQuery微调器图像

我有一个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); } }); } 

Answer 1

1. 从ajax loader获取加载器gif（GIF图像）
2. 将此图像放在要显示/隐藏的位置。
3. 在ajax之前， 显示此图像 。
4. 完成后， 隐藏图像

---

 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(); } }); } 

Answer 2

 var $loading = $('#loadingDiv').hide(); $(document) .ajaxStart(function () { $loading.show(); }) .ajaxStop(function () { $loading.hide(); }); 

其中’#loadingDiv’是覆盖页面部分或整个页面的微调器gif。

Answer 3

我用gif图像显示/隐藏div。 它就像一个魅力：

Answer 4

在Preloaders.net上，您可以找到非常开放的代码以及纯JavaScript和JQuery格式的所有解释。 你也可以在那里获得加载器图像