如何实现一个引导模式的加载指标，等待AJAX从服务器获取数据？
我有一个从链接启动的引导模式。 大约3秒，它只是空白，而AJAX查询从数据库中提取数据。 我怎样才能实现某种加载指标？ twitter bootstrap是否默认提供此function？
编辑：模态的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> 我猜你正在使用jQuery.get或其他一些jQuery Ajax函数来加载模态。 您可以在ajax调用之前显示指示符，并在ajax完成时将其隐藏。 就像是
$('#indicator').show(); $('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); });
下面的例子解决了同样的问题：
这个例子使用jQuery JavaScript库。
首先，使用AjaxLoad网站创build一个Ajax图标。
然后将以下内容添加到您的HTML：
<img src="http://img.dovov.comloading.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(); });
该解决scheme来自以下链接。 如何在Ajax请求处理期间显示animation图标
有一个使用jQuery的全局configuration。 此代码在每个全局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/
加载指示符只是一个animation图像（.gif），直到在AJAX请求上调用完成的事件才会显示。 http://ajaxload.info/提供了很多选项来生成加载图像，你可以覆盖你的模态。; 据我所知，Bootstrap不提供内置的function。
这就是我如何处理加载需要刷新的远程内容：
$(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'); }); });
基本上，只需在加载消息时加载模态内容即可。 一旦完成加载，内容将被replace。
这就是我通过一个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>
