Jquery 使用ajax加载内容时在引导选项卡之间显示微调器

我使用bootstrap3选项卡，并使用ajax在选项卡上加载每个选项卡的内容

但有时当服务器速度变慢时，加载内容需要时间。因此，我希望在选项卡内容中放置一个微调器，直到服务器返回选项卡内容为止

首先，是否有一个内置的简单选项来实现这一点？（淡入淡出效果不是我想要的。）

如果没有内置函数可以使用，我是否应该在内容中放置一个div，并在ajax返回结果时隐藏/显示它

或者我不应该重复我自己，我应该使用jquery将div元素放在活动选项卡中，并在ajax完成时替换它

最好的选择是什么

  <!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home"> <div class="spinner"></div> </div>
  <div class="tab-pane" id="profile"><div class="spinner"></div></div>
  <div class="tab-pane" id="messages"><div class="spinner"></div></div>
</div>

---

由于您正在使用

jQuery.load

，您可以如下方式修改代码：

<div class="loading">
    <img src="/images/loading.gif" />
    <div>Loading</div>
</div>

首先向页面添加一个加载div。我通常会这样做：

<div class="loading">
    <img src="/images/loading.gif" />
    <div>Loading</div>
</div>

然后修改ajax Javascript：

$('.nav-tabs a').click(function (e) {
    e.preventDefault();
    if ($(this).closest('li').is('.active')) { //stop sending another query when tab active
        return;
    }

    var ts = +new Date();
    var tabUrlAddress = $(this).attr("data-url") + '?timestamp=' + ts;
    var href = this.hash;
    var pane = $(this);
    pane.show();

    //Show the loader
    $(".loading").show();

    $(href).load(tabUrlAddress, function (result) {
        //Hide when complete
        $(".loading").hide();
    });
});

---

你能分享你用来加载标签内容的ajax代码吗？我已经添加了查询。这是另一个不错的选择，我不必重复加载，但我宁愿在点击的标签内旋转，而不是在整个页面中间旋转。我认为选择器在代码中应该是$（“.loading”）？您可以使用

$（href）.html（）

设置选项卡的内容，而不是显示加载程序。那你以后就不需要把它藏起来了。尽管在你的站点上使用相同的加载程序是相当不错的，而不仅仅是标签。

$('.nav-tabs a').click(function (e) {
    e.preventDefault();
    if ($(this).closest('li').is('.active')) { //stop sending another query when tab active
        return;
    }

    var ts = +new Date();
    var tabUrlAddress = $(this).attr("data-url") + '?timestamp=' + ts;
    var href = this.hash;
    var pane = $(this);
    pane.show();

    //Show the loader
    $(".loading").show();

    $(href).load(tabUrlAddress, function (result) {
        //Hide when complete
        $(".loading").hide();
    });
});