ajax在选项卡面板中加载gif

时间:2015-01-20 23:35:06

标签: ajax twitter-bootstrap-3

我正在尝试在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;
}

1 个答案:

答案 0 :(得分: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动画附加到的任何容器的类。

我发现这个解决方案更清洁&amp;工作得很好。