B/S下，页面后台计算需要大量时间，前台如何显示载入中或进度条

来源：互联网发布：软件实训心得体会编辑：程序博客网时间：2024/04/28 04:16

刚接到这个项目的时候感觉计算数据不会占用太多的时间，所以没有考虑用ajax做，而是直接将获取到的数据用table的形式展示出来，而随着项目的深入，却出现了这样的问题：打开页面时，因为后台忙于计算数据，所以用户只能看到白花花一个页面，而这个时候在改成ajax就有些伤筋骨了，于是在网上大概找了找类似的问题，有很多人文，可是正面回答的人却不多，更多的人都是说用AJAX解决~用GIF解决~用CSS解决~~，那该怎么解决呢？

先说说我决定使用的方法，使用GIF图片：

在这里先要弄清楚一个基础问题，载入一个asp页面时，系统将先访问.cs文件中 protected void Page_Load(object sender, EventArgs e)的文件，然后是asp中的<% = %>内容(实际上也是.cs文件中的内容)，在然后才是脚本文件。

知道这点，那么就好解决了，在显示内容前，给用户显示GIS图片图片就可以了，在<body>标签中添加：

然后在添加一个js脚本用来隐藏gif图片就搞定了~

document.getElementById("typediv1").style.display="none";//隐藏

</script>

---------------------------------------------------------

相对于我使用的方法，ajax通过js从某种方面来说更容易控制，这里我用jquery来进行介绍，相对页面的某个局部去进行数据更新，那么在针对的DIV图层id进行内容更新即可：

$.ajax({
        url: '.cs文件所在的连接 ',
        type: 'POST',
        dataType: 'html',
        success: function (data) {
            $("#test").html(data);

        }
    });

</script>

-----------------------------------------------------

而是用css虽然耗费的资源最少，使用上却需要写考虑，这里我把整个页面都放出来，有需要的人拿出用吧~

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>weibo.com/192jiang </TITLE>

#loader_container {

text-align:center;

position:absolute;

top:40%;

width:100%;

left: 0;

}

#loader {

font-family:Tahoma, Helvetica, sans;

font-size:11.5px;

color:#000000;

background-color:#FFFFFF;

padding:10px 0 16px 0;

margin:0 auto;

display:block;

width:230px;

border:1px solid #5a667b;

text-align:left;

z-index:2;

}

#loader_bg {background-color:#e4e7eb;

position:relative;

top:8px;

left:8px;

height:7px;

width:213px;

font-size:1px;

}

#progress {

height:5px;

font-size:1px;

width:1px;

position:relative;

top:1px;

left:0px;

background-color:#77A9E0;

}

</style>

document.write('<div id="loader_container"><div id="loader"><div align="center">页面正在很用力de加载中……<br />玩新浪微博的粉一下weibo.com/192jiang</div><div id="loader_bg"><div id="progress"> </div></div></div></div>');

var t_id = setInterval(animate,20);

var pos=0;

var dir=2;

var len=0;

function animate()

{

var elem = document.getElementById('progress');

if(elem != null) {

if (pos==0) len += dir;

if (len>32 || pos>179) pos += dir;

if (pos>179) len -= dir;

if (pos>179 && len==0) pos=0;

elem.style.left = pos;

elem.style.width = len;

}

function remove_loading() {

this.clearInterval(t_id);

var targelem = document.getElementById('loader_container');

targelem.style.display='none';

targelem.style.visibility='hidden';

}

</script>

</HEAD>

</BODY>

</HTML>

本文出自 “麒麟天空” 博客，请务必保留此出处http://192jiang.blog.51cto.com/666178/782227