ajax 在选项卡面板中加载 gif

Question

我正在尝试在 Ajax 通话期间显示 gif；如果 div 位于正文级别但不会出现在选项卡面板中，则它可以正常工作。我试过将 div 放在选项卡窗格、容器、行和列级别，但它不会显示。简单 html:

 <div id="loading">
     <img id="loading-image" src="images/page-loader.gif" alt="waiting..." />
 </div>

jquery:

$('#loading').hide(); $('#loading').show(); // as required

css:

#loading {
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 position: fixed;
 display: block;
 opacity: 0.7;
 background-color: #fff;
 z-index: 99;
 text-align: center;
}

#loading-image {
 position: absolute;
 top: 10px;
 left: 24px;
 z-index: 100;
}

Answer 1

试试这个：

$(document).ajaxStart(function() {
    $('<div id="loading"><img id="loading-image" src="images/page-loader.gif" alt="waiting..." /></img></div>')
.prependTo('.tabClass'); });

$(document).ajaxStop(function() {
    $('#loading').remove();
});

将 'tabClass' 替换为您希望 gif 动画附加到的任何容器的 class。

我发现此解决方案更简洁并且运行良好。

ajax 在选项卡面板中加载 gif

ajax loading gif in tab panel

ajax

twitter-bootstrap-3