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

下面我有一个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> 

非常感谢您的帮助。 谢谢

那么你应该使用

$(window).load(function () {

                //write you progress bar function here..

    });

---

“给猫换肤的不止一种方法”：jQuery（函数（$）{}）或多或少做到了这一点。与$（function（）{}）相同，$（document）.ready（function（）{}）。谢谢你的回答，但是你还没有回答我的全部问题，如何让它自动启动？目前它使用启动/停止按钮。不确定，但是你是把它包括在头部还是身体部分？我尝试了这两种方法，但在网页中的第一个html元素开始时仍然加载。@Dave:window.load和document.ready用于不同的钱包，而不是相同的钱包。您是否有任何类型的容器来加载您的页面？？？@Kabilan:您是指div容器吗？是的，所有内容都包含在id为“container”的一个DIV中。我一直在到处寻找这样的预加载程序，但没有一个是预加载的，它们与其他内容一起加载，或者它们与图像一起工作。。。

#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;
}

$(window).load(function () {

                //write you progress bar function here..

    });