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

【问题标题】：Implement a loading indicator for a jQuery AJAX call为 jQuery AJAX 调用实现加载指示器
【发布时间】：2023-03-03 06:24:28
【问题描述】：

我有一个从链接启动的引导模式。大约 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>

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

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

此示例使用 jQuery JavaScript 库。

首先，使用AjaxLoad site 创建一个 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();
});

此解决方案来自以下链接。 How to display an animated icon during Ajax request processing

【讨论】：

+1 表示“只做一次”挂钩机制。但是一个固定的加载指示器对于通常有一个覆盖部分隐藏加载指示器的模态来说并不是那么好......在这种情况下最好将加载指示器放在模态中，例如在标题栏中。或者可以为指示器添加一个高 z-index 以便它显示在覆盖层上方？
嘿，所有...查看基于此答案的demo。
请记住将这些脚本放在对 JQuery 脚本的引用之后。由于页面内的放置顺序相反，我只花了一个小时。
听起来ajaxStart() 和ajaxStop() 根据@ajaristi 的回答会是一个更好的解决方案，因为每个AJAX 批处理只触发一次：stackoverflow.com/questions/3735877/…

【解决方案2】：

我猜你正在使用 jQuery.get 或其他一些 jQuery ajax 函数来加载模式。您可以在 ajax 调用之前显示指示器，并在 ajax 完成时将其隐藏。类似的东西

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

【讨论】：

【解决方案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/

【讨论】：

这很好用，但不要忘记为使用模态的网站添加 z-index css。
这应该比@leansy 答案有更多的选票，因为它正确使用了.ajaxStart() 和ajaxStop()，每个AJAX 批处理触发一次：stackoverflow.com/questions/3735877/…。

【解决方案4】：

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

【讨论】：

【解决方案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');
    });
});

基本上，只需在加载时用加载消息替换模态内容。内容将在加载完成后被替换。

【讨论】：

【解决方案6】：

这就是我通过 Glyphicon 实现加载指示器的方式：

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>

    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>

    <style>
        .gly-ani {
          animation: ani 2s infinite linear;
        }
        @keyframes ani {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(359deg);
          }
        }
    </style>  
</head>

<body>
<div class="container">

    <span class="glyphicon glyphicon-refresh gly-ani" style="font-size:40px;"></span>

</div>
</body>

</html>

【讨论】：