如何做一个做一个数据加载进度条？求助

如何做一个做一个数据加载进度条？
要求：必须是数据加载进度和进度条进度一致，不是要那种假象的视觉效果，
要像打开网页时候的进度条那样和数据加载进度一致。
请各位大侠帮忙，有样例的给贴一个，，谢谢啦

解决方案 »

  1.   

    网上很多的  Google下就应该有的！
      

  2.   

    试试 jQuery 的 ajaxStart 和 ajaxStop ...$("#loadingImg").ajaxStart(function(){
      $(this).show();
    });
    $("#loadingImg").ajaxStop(function(){
      $(this).hide();
    });
      

  3.   

    数据加载进度条? 加载什么数据? 网页的么?还是其他的? 你看到的所谓精确的网页数据加载我估计都是FLASH的动画加载进度吧...
      

  4.   


    一般都是通过AJAX去查看事件的进展情况 不断的去读 然后回来将进度更新在进度条上吧
      

  5.   

    楼主，这是我以前写的一个投票的进度条，你可以在上面加上一个*%,来显示数据加载进度，希望对你有帮助！Loading.js 
    //频率 
    var frequency = 1; 
    //步长  
    var step = 1; 
    //背景颜色 
    var loadingBgcolor = "blue"; 
    //宽度 
    var loadingWidth = 500; 
    //要显示到的div 
    var loading_Div; 
    //终止条件 
    var timeID = new Array(); 
    //百分比数 
    var varx = new Array(); 
    var v=0; 
    var num = 0 ; 
    /* 
    *参数说明: 
    *content：显示内容，可以为空； 
    *imageURL：将引用JS文件的路径设置即可； 
    *left：进度条显示位置left 
    *top：进度条显示位置top      Loading('', 'LoadingJS/', 20, 100,loading_div1,var1) 
    */ 
    function Loading(content, imageURL, left, top,loading_div,varX) 
    { 
    //imageURL = imageURL + "Loading.jpg"; 
    LoadTable(content, imageURL, left, top,loading_div); 
    document.getElementById("showimage"+num).style.display=""; 
    alert(num+"ppppppp") ; 
    timeID[num]=window.setInterval("RefAct();", frequency); 
    getVar(varX) ; 
    num++ ; 
    }  function getVar(varX) 
    {   varx[num]=varX; 
    alert("varx=="+num+"]]]]"+varx[num]); 
    } function RefAct() 
    {  
    var imgAct = document.getElementsByName("imgAct") ; 
    for(var i=0;i <imgAct.length;i++){ 
    if(imgAct[i].width == loadingWidth*varx[i]) 
    { 
      clearInterval(timeID[i]); 
    }else{ 
    imgAct[i].width += step; 
    } } 
    } function LoadTable(content, imageURL, left, top,loading_div) 
    { 
    getLoading_div(loading_div); 
    var strLoading; 
    strLoading = ""; 
    strLoading += " <div id=\"showimage"+num+"\" style=\"DISPLAY:none;Z-INDEX:100;LEFT:" + left+ "px;POSITION:absolute;TOP:" + top+ "px;\" align=\"center\">"; 
      strLoading += " <TABLE id=\"Table1"+num+"\" cellSpacing=\"0\" cellPadding=\"0\" width=\"" + loadingWidth + "\" border=\"1\" bgcolor=\"" + loadingBgcolor+ "\">"; 
      strLoading += " <tr>"; 
        strLoading += " <td align=\"center\">"; 
        strLoading += " <font size=\"4\" face=\"Courier New, Courier, mono\"> <strong>" + content + " </strong> </font>"; 
        strLoading += " </td>"; 
      strLoading += " </tr>"; 
      strLoading += " <TR>";     strLoading += " <TD class=\"Loading\" height=\"8\">"; 
        strLoading += " <IMG name=\"imgAct\" height=\"8\" alt=\"\" src=\"" + imageURL + "\" width=\"0\">"; 
        strLoading += " </TD>"; 
      strLoading += " </TR>"; 
      strLoading += " </TABLE>"; 
    strLoading += " </div>"; 
    loading_Div.innerHTML = strLoading; } 
    function getLoading_div(loading_div) 
    { 
      loading_Div=loading_div; } html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html> 
    <head> 
    <title>显示票数条形图 </title> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <script src="LoadingJS/Loading.js" type="text/javascript"> </script> 
    <script language="JavaScript"> 
        function invoke1() 
        {  
      var var1=0.5;// document.getElementById("var1").value; 
      alert("var1="+var1); 
      var loading_div1=document.getElementById("loading_div1"); 
      alert("loading_div1="+loading_div1);       // return Math.floor(Math.random()*num)+1; 
          Loading('', 'LoadingJS/Loading.jpg', 20, 100,loading_div1,var1) 
      return true ; 
        } function invoke2() 
        {  
      var var2= 0.8;//document.getElementById("var2").value; 
      alert("var2="+var2); 
      var loading_div2=document.getElementById("loading_div2"); 
        alert("loading_div2="+loading_div2); 
      Loading('', 'LoadingJS/Loading.jpg', 20, 200,loading_div2,var2); 
      return true; 
        } 
    function invoke3() 
        {  
      var var3= 0.9;//document.getElementById("var3").value; 
      alert("var3="+var3); 
      var loading_div3=document.getElementById("loading_div3"); 
      alert("loading_div3="+loading_div3); 
      Loading('', 'LoadingJS/Loading.jpg', 20, 300,loading_div3,var3); 
          return true; 
        } 
    function invoke4() 
        {  
      var var4= 0.4; 
      alert("var4="+var4); 
      var loading_div4=document.getElementById("loading_div4"); 
      alert("loading_div4="+loading_div4); 
      Loading('', 'LoadingJS/Loading.jpg', 20, 400,loading_div4,var4); 
          return true; 
        } function aaa() 
    { 
    var bool1 = invoke1(); 
    if(bool1) 
    var bool2=invoke2(); 
    if(bool2) 
        var bool3=invoke3(); 
    if(bool3) 
    invoke4(); 
    } 
    </script> </head> <body onload="aaa();"> 
        <div> <ww:iterator value="allVoteList"> 
    <input type="hidden" name="var <ww:property value='id'/>" value=" <ww:property value='counter'/>"> 
    </ww:iterator> </div> 
    <!-- <input type="button" name="Button" value="Button" onclick="invoke()"> 
    <ww:iterator value="allVoteList"> 
      
      <div id="loading_div <ww:property value='id'/>" > </div> 
    </ww:iterator> 
            --> 
    <div> 
    <div id="loading_div1" > </div> 
    </div> 
    <div> 
    <div id="loading_div2" > </div> 
    </div> 
    <div id="loading_div3" > </div> 
    <div id="loading_div4" > </div> 
    </body> 
    </html> 
      

  6.   

    LZ挺漂亮的嘛he...
    百度搜啊
    Ajax进度条   一般都很同步的啦
      

  7.   

    http://hi.baidu.com/nanqiangma/blog/item/a9cdd48d415e1a1bb21bba66.html
      

  8.   


    你以为楼主的头像是真人?
    难道你不知道CSDN上很多人都喜欢用女人头像的吗?
      

  9.   

     ajax进度条 还不知道怎么搞啊 就是不明白啊 struts2中有自己的进度提示和成功提示，但是ajax我不会搞啊。。
      

  10.   

    不用那么复杂，你就在调用一个函数的时候增加上进度条，函数结束的时候调用结束进度条的函数就可以了。，至于进度条的制作，我觉得比较简单的方法就是，浮动的div，在div中美妙add一个进度条的图片，和windows装软件的时候一样，每秒增加一个，到头了清空就可以了，很简单，主要用到的应该是div和js不用ajax之类的
      

  11.   

    ajax也不可能做到完全同步吧，不过可以做到1秒钟甚至更短时间读取一次数据。
    比如说上传文件时，上传的真正处理肯定是在后台的，在后台的上传函数中维护一个静态变量，用来实时存储上传的进度，在页面中用ajax实时的去取这个数值，然后返回到页面上更新进度条的比例。
      

  12.   

    这有个例子，可以运行的：
    http://download.csdn.net/source/1574104
      

  13.   

    用jquery，网上很很多例子的，还有大型ext JS
      

  14.   

    我有收集一个与后台同步的进度条，用Ajax实现，可惜贴不上来
      

  15.   


    真正的进度效果, 主要是数据问题, 你可以考虑看看jQuery.ui.progressbar, 然后, 根据你一段程序执行过程的不同阶段, 去设置进度..
      

  16.   

    我感觉。要想同步，必须得AJAX 吧？
      

  17.   


    默认本来就是同步的....Ajax以异步著称....