Question

我想在中心和页面顶部创建一个加载进度条，例如Gmail，并在所有浏览器中工作

Answer 1

这是基本代码

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
    <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
    <head>
        <style>
            body{
                margin:0px;
            }
            #state{
                width:100px;
                height:30px;
                background:#FEE27C;
                position:fixed !important; 
                position:absolute /* fallback for IE6 */;
            }
        </style>
        <script language=javascript type='text/javascript' >
            function set(){
                var s = screen_now_size();
                margin_right = (s['width']-100)/2;

                //append or change margin right size
                var state_layer = document.getElementById("state");
                state_layer.style.right      = margin_right+"px"
            }

            function screen_now_size(){ // get screen current size
                var a=new Array();
                if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat'){
                  a["width"]=document.documentElement.clientWidth;
                  a["height"]=document.documentElement.scrollTop+document.body.clientHeight;
                }else{
                  a["width"]=document.body.clientWidth;
                  a["height"]=document.body.scrollTop+document.documentElement.clientHeight;
                  }
                return a;
            }
        </script>
    </head>
    <body onload='set()'>
        <div id='state'></div>
        <!--for test:-->
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        for test
    </body>
    </html>

Answer 2

您可以使用jQuery UI Progressbar plugin。当您的页面加载所需的数据时，请更新进度条的值。

Answer 3

您先生需要使用$(document).ajaxStart()和$(document).ajaxStop()来实现jQuery。

http://api.jquery.com/ajaxStart/
http://api.jquery.com/ajaxStop/

这可能不是您想要的，但它会帮助您入门： http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/

Answer 4

你需要混合使用jQueryUI ProgressBar和jQuery FancyBox来保存内容（比如进度条）。

如何使Gmail像加载进度条

4 个答案: