如何在数据加载时添加加载指示器答案

【问题标题】：How to add loading indicator while data is loading如何在数据加载时添加加载指示器
【发布时间】：2013-10-30 19:23:37
【问题描述】：

我想在数据加载时显示加载指示器。以下是我当前的代码：

$.ajax({ 类型：“发布”，网址：“网址”，数据：数据字符串，缓存：假，成功：函数（html）{ $("#div").html(html); } });

我该怎么办？

【问题讨论】：

提示：在调用$.ajax(...) 之前添加/显示它并在success() 和error() 上隐藏/删除它
How to implement a jQuery spinner image in an AJAX request的可能重复

标签： jquery ajax

【解决方案1】：

使用这个：

$.ajax({
     type: "POST",
     url: "URL",
     data: dataString,
     cache: false,
     success: function(html) {
         $(selector).html();
         $("#div").html(html);
     },
     beforeSend: function(){
         $(selector).html("your loading image");
     }

});
$(selector).html();

【讨论】：

【解决方案2】：

您可以为此使用 jquery ajaxStart 和 ajaxStop 实用程序。

喜欢

$( document ).ajaxStart(function() {
  $( "#loading" ).show();
});

【讨论】：

【解决方案3】：

<script type="text/javascript">
$(document).ready(function() {  

$.ajax({
     type: "POST",
     url: "URL",
     data: dataString,
     cache: false,
     success: function(html) {
         $("#div").html(html);
     }
});

$( document ).ajaxStart(function() {
  $("#loading" ).show();
});

$( document ).ajaxStop(function() {
  $("#loading" ).hide();
});


});
 </script>

【讨论】：

【解决方案4】：

$.ajax({
     type: "POST",
      beforeSend : function(){ $('#somediv').show();},
     url: "URL",
     data: dataString,
     cache: false,
     success: function(html) {
      $("#div").html(html);
      $("#somediv").hide();
     }
});

【讨论】：

这将在以下行给出错误：beforeSend : $('#somediv').show(); 应该有逗号而不是半列。
应该是beforeSend : function(){ $('#somediv').show();}, 而不是beforeSend : $('#somediv').show();

【解决方案5】：

这是一个简单的逻辑。

1) ajax 调用前，显示正在加载的 gif 图片。

2) 在回调时，隐藏加载图片。

$("#loading" ).show();
$.ajax({
     type: "POST",
     url: "URL",
     data: dataString,
     cache: false,
     success: function(html) {
         $("#div").html(html);
         $("#loading" ).hide();
     }
     error: function (html) {
         console.log("errorResponse: " + html);
         $("#loading" ).hide();
     }
});

【讨论】：