javascript - Jquery进度条: How to activate it on document loading/initiation

Question

下面我有一个 jquery 进度条(参见代码)。现在它使用开始/停止按钮功能加载。我希望它在我的网站的所有其他元素加载之前首先自动加载，因为它毕竟是一个进度条。我希望它在网页开始加载时启动，并在网页内容开始显示时停止。 (只是为了显示白屏等待期间的进度...)

我的代码:

<script type="text/javascript">
var pct=0;
var handle=0;
function update(){
    $("#progressbar").reportprogress(++pct);
    if(pct==100){
            clearInterval(handle);
            $("#run").val("start");
            pct=0;
    }
}
jQuery(function($){
    $("#run").click(function(){
            if(this.value=="start"){
                    handle=setInterval("update()",100);
                    this.value="stop";
            }else{
                    clearInterval(handle);
                    this.value="start";
            }
    });
    $("#reset").click(function(){
            pct=0;
            $("#progressbar").reportprogress(0);
    });
});
</script> 

HTML:

<div id="progressbar"></div>
<input type="button" id="run" value="start"></input>
<input type="button" id="reset" value="reset"></input>

CSS:

#progressbar{
    border:1px solid black;
    width:200px;
    height:20px;
    position:relative;
    color:black;
}
/* color bar */
#progressbar div.progress{
    position:absolute;
    width:0;
    height:100%;
    overflow:hidden;
    background-color:#369;
}
/* text on bar */
#progressbar div.progress .text{
    position:absolute;
    text-align:center;
    color:white;
}
/* text off bar */
#progressbar div.text{
    position:absolute;
    width:100%;
    height:100%;
    text-align:center;
}

非常感谢任何帮助。谢谢

Answer 1

那么你应该使用

$(window).load(function () {

                //write you progress bar function here..

    });