我在 ASP.NET MVC 2 页面中使用 jQuery。这是一个 super 简单的帖子,可以得到一个日期作为返回。该过程本身运行得非常快。我想使用旋转图像向用户展示正在发生的事情。在 Firefox 中一切正常,在本地测试。然而,在 IE 8 中,旋转图像显示的时间不够长;它只是闪烁。如果最终用户看不到流程正在运行/完成的指示,这可能会让最终用户感到困惑。解决这个问题的最佳方法是什么?
谢谢。
<img id="signedout<%: item.Id %>" src="/Content/Images/signed_out.png" alt="Signed Out" title="Signed Out" style="display:none" />
<div id="ajaxloader<%: item.Id %>" style="display:none;text-align:center"><img src="/Content/Images/ajax-loader.gif" alt="loading..." title="loading..." /></div>
<script type="text/javascript">
$(function () {
var id = "<%: item.Id %>";
$("#signout" + id).click(function () {
if (confirm("Are you sure you want to sign this visitor out?")) {
$(this).hide();
//$("#signout" + id).hide();
$("#ajaxloader" + id).show();
var url = '<%: Url.Action("signout") %>';
$.ajax({
type: "POST",
url: url,
data: "id=" + id,
success: function (result) {
$("#timeout" + id).append(result);
$("#ajaxloader" + id).hide();
$("#signedout" + id).show();
$("#row" + id).css("background", "#E8E8E8");
},
error: function () {
alert("There was an unexpected error. Please try again later.");
$("#ajaxloader" + id).hide();
$("#signout" + id).show();
}
});
}
});
});
</script>
最佳答案
最好给出一些其他指示来表明该过程已完成,而不是在实际上没有处理任何内容时误导性地显示旋转器。不过你似乎对此已经下定决心了。
这是基于 amurra 的答案,旨在当且仅当超时已返回时,在加载进程后隐藏微调器。因此,如果 AJAX 请求返回“太快”,它将等待超时。
var timeoutComplete=false;
var requestComplete=false;
function HideLoadingSpinner() {
if(requestComplete) {
$("#ajaxloader" + id).hide();
} else {
timeoutComplete=true;
}
}
同时,在点击处理程序内...
setTimeout(HideLoadingSpinner, 2000);
$.ajax({type: "POST",
url: url,
data: "id=" + id,
success: function (result) {
$("#timeout" + id).append(result);
$("#signedout" + id).show();
$("#row" + id).css("background", "#E8E8E8");
if(timeoutComplete) {
$("#ajaxloader" + id).hide();
} else {
requestComplete=true;
}
},
error: function () {
alert("There was an unexpected error. Please try again later.");
$("#ajaxloader" + id).hide();
$("#signout" + id).show();
}
});
编辑:我刚刚从error
函数中删除了if(timeoutComplete)
内容,因为会有一个alert
无论如何都在它之前。
关于asp.net-mvc - jQuery + Ajax + 加载旋转图像 = 太快了!,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3468740/