进度条应在打开灯箱后开始

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