holding waiting screen until next page show
需求:
从A跳转到B页面,或者Post B页面时,如果B页面执行时间过久,客房端的屏幕会长时间处于空白.
如果显示一个waiting gif,用户体验会好很多.
分析:
在跳转前,先清空body所有元素,然后动态加载一个waiting gif到body,注意Waiting gif重新加载,不然图片会静止
代码段:
<body>
<a href="content.aspx" onclick="switchLoading();">TTTTTTTTTTTTTTTTTTTTTTTTT</a>
<script>
function ShowHoldScreenLayer(container) {
document.body.innerHTML = "";
var _holdScreenLayerObject = null;
if (_holdScreenLayerObject == null) {
_holdScreenLayerObject = document.createElement("<span>");
_holdScreenLayerObject.style.display = "none";
_holdScreenLayerObject.style.position = "absolute";
_holdScreenLayerObject.style.left = 0;
_holdScreenLayerObject.style.top = 0;
_holdScreenLayerObject.style.zIndex = 999;
_holdScreenLayerObject.style.width = document.body.clientWidth;
var posLeft = (window.screen.width - 250) / 2;
var posTop = (window.screen.height - 200) / 2;
var oDiv1 = document.createElement("<div style='POSITION: absolute;LEFT:" + posLeft + "px;Top:" + posTop + "px;display:block; TEXT-ALIGN: center;border:0px; border-style:solid; border-color:#aaa;background-color:#fff;cursor:wait;color:#000; hasLayout:-1;width:250px;'></div>");
//oDiv1.innerHTML = "<h3 style=\"margin:5px;padding:2px;\"><img src=\"/images/busy.gif\" /> Please wait...</h3>";
oDiv1.innerHTML = "<img src=\"/images/wait.gif\" />";
_holdScreenLayerObject.appendChild(oDiv1);
if (typeof (container) == "undefined") {
container = document.body;
}
container.appendChild(_holdScreenLayerObject);
}
_holdScreenLayerObject.style.display = "block";
}
</script>
从A跳转到B页面,或者Post B页面时,如果B页面执行时间过久,客房端的屏幕会长时间处于空白.
如果显示一个waiting gif,用户体验会好很多.
分析:
在跳转前,先清空body所有元素,然后动态加载一个waiting gif到body,注意Waiting gif重新加载,不然图片会静止
代码段:
<body>
<a href="content.aspx" onclick="switchLoading();">TTTTTTTTTTTTTTTTTTTTTTTTT</a>
<script>
function ShowHoldScreenLayer(container) {
document.body.innerHTML = "";
var _holdScreenLayerObject = null;
if (_holdScreenLayerObject == null) {
_holdScreenLayerObject = document.createElement("<span>");
_holdScreenLayerObject.style.display = "none";
_holdScreenLayerObject.style.position = "absolute";
_holdScreenLayerObject.style.left = 0;
_holdScreenLayerObject.style.top = 0;
_holdScreenLayerObject.style.zIndex = 999;
_holdScreenLayerObject.style.width = document.body.clientWidth;
var posLeft = (window.screen.width - 250) / 2;
var posTop = (window.screen.height - 200) / 2;
var oDiv1 = document.createElement("<div style='POSITION: absolute;LEFT:" + posLeft + "px;Top:" + posTop + "px;display:block; TEXT-ALIGN: center;border:0px; border-style:solid; border-color:#aaa;background-color:#fff;cursor:wait;color:#000; hasLayout:-1;width:250px;'></div>");
//oDiv1.innerHTML = "<h3 style=\"margin:5px;padding:2px;\"><img src=\"/images/busy.gif\" /> Please wait...</h3>";
oDiv1.innerHTML = "<img src=\"/images/wait.gif\" />";
_holdScreenLayerObject.appendChild(oDiv1);
if (typeof (container) == "undefined") {
container = document.body;
}
container.appendChild(_holdScreenLayerObject);
}
_holdScreenLayerObject.style.display = "block";
}
</script>
