javascript - HTML5 应用程序中的加载屏幕

Question

我正在开发一个项目（不是游戏），涉及获取大量资产（css、js 等）。在 UIWebView (iOS) 中打开页面时，在加载所有内容时会出现 3-5 秒的空白页面。

我想避免这种情况。我猜我应该添加一个 HTML5 加载屏幕，但我不知道该怎么做。任何指针？

Answer 1

我会隐藏内容直到它被加载，同时使用 JS 显示加载动画。

对于简单的动画结帐 HTML5 画布中的简单加载动画

Answer 2

您可以<progress>在 HTML5 中使用元素。有关源代码和现场演示，请参阅此页面。http://purpledesign.in/blog/super-cool-loading-bar-html5/

这是进度元素...

<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>

希望这会给你一个开始。