在HTML5應用中加載屏幕

Question

我正在開發涉及獲取大量資源（css，js等）的項目（而不是遊戲）。當在UIWebView（iOS）中打開頁面時，有一個空白頁面需要3-5秒才能加載。

我想避免這種情況。我猜我應該添加一個HTML5加載屏幕，但我不知道該怎麼做。任何指針？

Answer 1

我會隱藏內容直到它被加載，並使用JS在此期間顯示加載動畫。

對於一個簡單的動畫結賬 Simple loading animation in HTML5 canvas

Answer 2

可以在HTML5使用<progress>元素。看到這個頁面的源代碼和現場演示。 http://purpledesign.in/blog/super-cool-loading-bar-html5/

這裏是progress元素...

<progress id="progressbar" value="20" max="100"></progress> 

這將有裝載值從20上。當然只有元素不會足夠開始。您需要在腳本加載時移動它。爲此，我們需要JQuery。下面是一個簡單的JQuery腳本，它從0開始到100，並在指定的時間段內執行某些操作。

<script> 
     $(document).ready(function() { 
     if(!Modernizr.meter){ 
     alert('Sorry your brower does not support HTML5 progress bar'); 
     } else { 
     var progressbar = $('#progressbar'), 
     max = progressbar.attr('max'), 
     time = (1000/max)*10, 
     value = progressbar.val(); 
     var loading = function() { 
     value += 1; 
     addValue = progressbar.val(value); 
     $('.progress-value').html(value + '%'); 
     if (value == max) { 
     clearInterval(animate); 
     //Do Something 
} 
if (value == 16) { 
//Do something 
} 
if (value == 38) { 
//Do something 
} 
if (value == 55) { 
//Do something 
} 
if (value == 72) { 
//Do something 
} 
if (value == 1) { 
//Do something 
} 
if (value == 86) { 
//Do something 
    } 

}; 
var animate = setInterval(function() { 
loading(); 
}, time); 
}; 
}); 
</script> 

將此項添加到您的HTML文件中。

<div class="demo-wrapper html5-progress-bar"> 
<div class="progress-bar-wrapper"> 
<progress id="progressbar" value="0" max="100"></progress> 
<span class="progress-value">0%</span> 
</div> 
</div> 

希望這會給你一個開始。