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动画附加到的任何容器的类。

我发现这个解决方案更干净&效果很好。