你可以使用jquery BlockUI来实现。链接到
演示。这应该适用于您所有的情况(完全回发和部分回发)。
为
PageRequestManager添加
beginRequest
和
endRequest
事件处理程序。
在
BeginRequestHandler
中,您可以使用自定义设置开始显示加载指示器,在
EndRequestHandler
中隐藏加载指示器。如果您不想阻止整个页面,则此插件有选项可以为元素(例如页面中的div内)显示加载指示器,请参考演示页面。
<script type="text/javascript">
function pageLoad(sender, args) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
}
function BeginRequestHandler(sender, args) {
showLoadingUI();
}
function EndRequestHandler(sender, args) {
$.unblockUI();
}
function showLoadingUI() {
$.blockUI({
message: '<h3><img src="../images/ajax-loader.gif" /> <br /> <span style="font-family: Tahoma,Verdana,Arial, Sans-Serif; font-size: 12px; color: #1390c6;"> Loading...</span></h3>',
showOverlay: true,
css: {
width: '130px', height: '110px',
border: 'none',
padding: '10px',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .9
}
});
}
</script>
同时记得从CDN或本地应用中引用jQuery和BlockUI插件脚本。
<script type="text/javascript" src="jquery1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>