javascript - 打开灯箱后进度条响起

Question

我在灯箱内有一个进度条。问题是当页面加载时进度条开始填充，而不是当我打开灯箱时。有没有办法来解决这个问题？我的代码在这里:http://jsfiddle.net/D9NBY/

<div class="prog">
<div id="filler" class="filler"></div>
</div>


<script>    
var stepSize = 50;
setTimeout((function() {
var filler = document.getElementById("filler"),
percentage = 0;
return function progress() {
  filler.style.height = percentage + "%";
  percentage +=1;
  if (percentage <= 100) {
    setTimeout(progress, stepSize);
 }
}

}()), stepSize);
</script>

Answer 1

您的进度条在文档加载时开始，因为那是您执行启动它的 setTimeout 的时候。

您应该能够通过将此调用包装在您需要时(当您使其可见时)而不是在加载时执行的另一个函数中来修复它。

像这样:

function start() {
    var stepSize = 50;
    setTimeout(...);
}

然后将其添加到您的 html 中的 onclick 处理程序中:

start();

Here is an updated fiddle that demonstrates it working .