为jQuery AJAX调用实现加载指示器

Question

我有一个从链接启动的Bootstrap模式.大约3秒钟它只是空白,而AJAX查询从数据库中获取数据.如何实现某种加载指示器？twitter bootstrap是否默认提供此功能？

编辑:模态的JS代码

<script type="text/javascript">
  $('#myModal').modal('hide');
  $('div.divBox a').click(function(){
    var vendor = $(this).text();
    $('#myModal').off('show');
    $('#myModal').on('show', function(){             
      $.ajax({
        type: "GET",
        url: "ip.php",
        data: "id=" + vendor,
        success: function(html){
          $("#modal-body").html(html);
          $(".modal-header h3").html(vendor);
          $('.countstable1').dataTable({
            "sDom": "T<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
              "sLengthMenu": "_MENU_ records per page"
            },
            "aaSorting":[[0, "desc"]],
            "iDisplayLength": 10,
            "oTableTools": {
              "sSwfPath": "swf/copy_csv_xls_pdf.swf",
              "aButtons": ["csv", "pdf"]
            }
          });
        }
      });
    });
  });
  $('#myModal').on('hide', function () {
    $("#modal-body").empty();
  });
</script>

Answer 1

我按照这个例子解决了同样的问题:

此示例使用jQuery JavaScript库.

首先,使用AjaxLoad站点创建Ajax图标.
然后将以下内容添加到HTML中:

<img src="/images/loading.gif" id="loading-indicator" style="display:none" />

以下是您的CSS文件:

#loading-indicator {
  position: absolute;
  left: 10px;
  top: 10px;
}

最后,您需要挂钩jQuery提供的Ajax事件; Ajax请求开始时的一个事件处理程序,以及结束时的一个事件处理程序:

$(document).ajaxSend(function(event, request, settings) {
    $('#loading-indicator').show();
});

$(document).ajaxComplete(function(event, request, settings) {
    $('#loading-indicator').hide();
});

此解决方案来自以下链接. 如何在Ajax请求处理期间显示动画图标

Answer 2

我猜你正在使用jQuery.get或其他一些jQuery ajax函数来加载模态.您可以在ajax调用之前显示指示符,并在ajax完成时隐藏它.就像是

$('#indicator').show();
$('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); });

Answer 3

有一个使用jQuery的全局配置.此代码在每个全局ajax请求上运行.

<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
    <img src="themes/img/ajax-loader.gif"></img>
</div>

<script type="text/javascript">
    jQuery(function ($){
        $(document).ajaxStop(function(){
            $("#ajax_loader").hide();
         });
         $(document).ajaxStart(function(){
             $("#ajax_loader").show();
         });    
    });    
</script>

这是一个演示:http://jsfiddle.net/sd01fdcm/

Answer 4

加载指示器只是一个动画图像(.gif),直到在AJAX请求上调用完成的事件为止.http://ajaxload.info/提供了许多用于生成加载图像的选项,您可以将这些图像覆盖在模态上.据我所知,Bootstrap不提供内置功能.

Answer 5

这就是我如何使用它来加载需要刷新的远程内容:

$(document).ready(function () {
    var loadingContent = '<div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div>';

    // This is need so the content gets replaced correctly.
    $("#myModal").on("show.bs.modal", function (e) {
        $(this).find(".modal-content").html(loadingContent);        
        var link = $(e.relatedTarget);
        $(this).find(".modal-content").load(link.attr("href"));
    });    

    $("#myModal2").on("hide.bs.modal", function (e) {
        $(this).removeData('bs.modal');
    });
});

基本上,只需在加载消息时替换模态内容.一旦完成加载,内容将被替换.