随笔-103  评论-37  文章-0  trackbacks-0
我有一个 PHP 程序,需要循环调用 XMLRPC 500 次左右,运行 20 多分钟。当程序运行的时候,客户端只有一片空白的页面,浏览器的状态一直是 load。作为用户来说,这种等待是漫长的,埋怨也就多了。

解决思路

如果有个进度条呈现在用户面前,告诉用户服务器端正在干嘛,当前运行了多少,问题就可以得到基本解决,虽然没有减少服务器端的运行时间,但用户的心里会有微妙的变化,感觉不再是枯燥无味的等待,至少等待还有个盼头 :) 。

考虑到每一次调用 XMLRPC 比较耗时,所以可以在每一次调用时使用 PHP 的 flush() 函数输出一段 JavaScript 对客户端浏览器中进度条显示进行动态更新。

posted on 2008-05-15 16:34 鱼有所思 阅读(2697) 评论(2)  编辑 收藏 引用 网摘 所属分类: AJAX

评论:
# re: PHP+JavaScript 实现动态显示服务器端运行进度条(转) 2008-05-15 16:41 | 鱼有所思
实现真正的 Loading 进度条显示加载进度效果,带百分比!

网上好像没见过(可能是我没运气)能用进度条真正体现网页加载进度的效果
<body onLoad="loadDiv.style.display='none';" style="margin:0px;">
<style type="text/css">
#loadDiv 
{
    position
:absolute;
    z-index
:999;
    width
:expression(document.body.clientWidth);
    height
:expression(document.body.clientHeight);
    background-color
:#FFFFFF;
    text-align
:center;
    padding-top
:200px;
}

</style>
<div id="loadDiv"><img src="http://www.51ajax.com/images/rss/loading.gif">&nbsp;Loading</div>
<iframe src="http://bbs.51js.com"></iframe>
</body>
  回复  更多评论
  
# 改进版的渐变效果进度条 2008-06-12 15:36 | 鱼有所思

改进版的渐变效果进度条

对原来的版本的渐变效果进度条做了改进,抛弃了长度达256的数组,并修改了样式表,实现了大幅度减少资源消耗。请看效果 。
 
<html>
<head>
<title>渐变效果进度条</title>
<script language="javascript">
    
var i;
    
function go()
    
{
        bar_width 
= document.getElementById("bg").clientWidth;
        i 
= bar_width;
        setTimeout('start();',
300);
    }

    
function start()
    
{
        
if(i-->0)
        
{
            ps.style.width 
= i;
            bn.innerHTML 
= Math.floor((bar_width-i)/bar_width*100)+"%";
            setTimeout('start();',
20);
        }

    }

    
</script>
<style type="text/css">
#bg 
{
filter
:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#FFFF00, EndColorStr=#FF0000);
width
:300px;
height
:20px;
border
:1px solid black;
z-index
:0;
position
:absolute;
}

#ps 
{
float
:right;
background-color
:#FFFF00;
width
:100%;
}

#bn 
{
position
:absolute;
text-align
:center;
width
:100%;
height
:100%;
cursor
:default;
}

</style>
</head>
<body onload="go();">
<div id="bg"><div id="ps"></div><span id="bn">0%</span></div>
</body>
</html>
  回复  更多评论
  

只有注册用户登录后才能发表评论。
网站导航: