我有以下HTML:
<div id="loading-overlay">
<div id="loading-overlay-background"></div>
<div id="loading-overlay-content">
Processing...
<br />
<img src="@Url.Content("~/Content/img/ajax-loader.gif")" title="" alt="Please Wait" />
</div>
</div>
CSS:
#loading-overlay
{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:5000;
}
#loading-overlay-background
{
position:relative;
width:100%;
height:100%;
top:0;
left:0;
background-color:#000;
opacity:0.5;
filter:alpha(opacity=50);
z-index:5001;
}
#loading-overlay-content
{
position:fixed;
top:25%;
left:50%;
margin-left:-150px;
margin-top:-20px;
height:40px;
width:300px;
color:#fff;
text-align:center;
z-index:15002;
}
这是一些JavaScript(jQuery):
$.ajax({
url: 'controller/action',
beforeSend: function () {
$('#loading-overlay').show();
},
success: function (data, textStatus, jqXHR) {
},
error: function (xhr) {
},
complete: function () {
$('#loading-overlay').hide();
}
});
为什么在任何AJAX调用中,我的“加载叠加”都不会出现在任何版本的IE中?
编辑:是的,它在FireFox和Chrome中运行良好。这些AJAX调用可能需要从几分之一秒到大约20秒才能完成。警报消息确实显示,但HTML不显示。
答案 0 :(得分:1)
尝试这样的事情,
beforeSend: function () {
$('#loading-overlay').show(1);
},
complete: function () {
$('#loading-overlay').delay(500).hide(250);
}
在行动中查看here ..
编辑:
您也可以尝试降低动画帧速率。
使用jQuery.fx.interval = 50;
默认情况下,此值设置为13毫秒。通过使用.fadeIn()
,增加此功能可以减轻CPU资源的负担。但在调整时要谨慎。阅读更多here。
答案 1 :(得分:0)
谢谢大家,我感到非常困惑,因为除了IE之外,所有浏览器都显示了我的叠加层,现在这对所有浏览器都很有效,我已经在jsf页面中集成了它,这很好。
答案 2 :(得分:-2)
因为你完全隐藏了它。
在成功/错误回调后调用它。