网页进度条的实现

1.当页面在向服务器获取数据需要较长时间时,可以将页面暂时屏蔽,并显示进度条,虽然进度条并不能真实的反映页面加载的情况,但是却是一种很好的用户体验。

function show() {
    var bgDiv = document.createElement("div");
    bgDiv.id = "bgDiv";
    bgDiv.style.position = "absolute";
    bgDiv.style.left = 0;
    bgDiv.style.top = 0;
    bgDiv.style.backgroundColor = "Gray";
    bgDiv.style.width = 0;
    bgDiv.style.height = 0;
    bgDiv.style.zIndex = 10000;
    bgDiv.style.visibility = "hidden";
    bgDiv.style.opacity = 0.4;
    bgDiv.style.filter = "alpha(opacity=40)";
    document.body.appendChild(bgDiv);
    var barDiv = document.createElement("div");
    barDiv.id = "barDiv";
    barDiv.align = "center";
    barDiv.style.position = "absolute";
    barDiv.style.left = "50%";
    barDiv.style.top = "50%";
    barDiv.style.zIndex = 10001;
    barDiv.style.marginLeft = -107;
    barDiv.style.marginTop = -7;
    barDiv.style.visibility = "hidden";
    document.body.appendChild(barDiv);
    var tagSelectList = document.getElementsByTagName("select");
    for (i = 0; i < tagSelectList.length; i++)
    {
        tagSelectList[i].style.visibility = "hidden";
    }
    bgDiv.style.visibility = 'visible';
    bgDiv.style.width = (document.body.scrollWidth > window.screen.width ? document.body.scrollWidth : window.screen.width) + "px";
    bgDiv.style.height = (document.body.scrollHeight > window.screen.height ? document.body.scrollHeight : window.screen.height) + "px";
    barDiv.style.visibility = 'visible';
}
posted @ 2012-07-11 23:06  飛雲若雪  阅读(1569)  评论(0编辑  收藏  举报