javascript - Jquery 进度条：如何在文档加载/启动时激活它

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..

    });