打開燈箱後進度條晃動開始

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。