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

Posted 2023-05-08

【中文标题】使用 ajax 加载内容时在 Bootstrap 选项卡之间显示微调器

【英文标题】：Showing spinner between Bootstrap tabs when loading content with ajax

【发布时间】：2014-08-23 02:33:01

【问题描述】：

我正在使用 bootstrap 3 选项卡并使用 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>

这里是更新每个标签内容的ajax查询

$('.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();

        $(href).load(tabUrlAddress, function (result) 

        );
    );

【问题讨论】：

你能分享一下你用来加载标签内容的ajax代码吗？

我已添加查询

【参考方案1】：

当你使用jQuery.load时，你可以像这样修改你的代码：

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

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

给它一些 CSS 让它浮动到屏幕中间，设置样式并最初隐藏它：

.loading 
    display: none;
    position: fixed;
    top: 350px;
    left: 50%;
    margin-top: -96px;
    margin-left: -96px;
    background-color: #ccc;
    opacity: .85;
    border-radius: 25px;
    width: 192px;
    height: 192px;
    z-index: 99999;

然后修改你的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();
    );
);

【讨论】：

这是另一个不错的选项，我不必重复加载，但我宁愿在单击的选项卡内旋转，而不是在整个页面的中间。而且我相信选择器在您的代码中应该是 $(".loading") ？

您可以使用$(href).html() 来设置选项卡的内容，而不是显示加载程序。然后你不需要隐藏它。虽然在您的网站上拥有相同的加载器，而不仅仅是标签，这相当不错。