在HTML5中创建一个加载屏幕

Question

我在寻找一个关于HTML5生成加载样式屏幕的教程，不知道从哪里开始。我的项目基本上是一个简单的HTML5游戏，其中我将加载各种精灵表和瓦片集。它们会相当小，但我想显示一个小的加载旋转器，而不是空白屏幕，同时加载所有资源。如果有人能给我指点方向，无论是好的链接还是代码示例来启动我的项目...我将不胜感激，因为我的谷歌搜索技巧今天不佳！

---

为了澄清，我需要弄清楚如何加载资源本身，而不是找到一个旋转器。例如，如何计算已经加载了 X% 的内容。

---

编辑2

愚蠢的我，我可以通过检查 <variable>.image.complete 来解决。投票关闭。

- erik

---

不必关闭它，其他人可能也需要知道 :) - Chris Laplante

Answer 1

这个网站非常适合用于动画加载图：http://ajaxload.info/。可以使用遮罩层来展示图片，同时在页面加载时防止与页面的交互。您可以使用一个div，将其置于其他所有元素上方（z-index），并将其宽度和高度设置为100％。

- Chris Laplante

---

我感谢提供的链接，但我更想知道如何找出如何生成加载屏幕本身，而不是图片...我会编辑问题以便更清楚。 - erik

你已经能够加载资源了吗？你只需要计算百分比吗？还是你也需要知道如何加载它们？ - Chris Laplante

由于这只是一个简单的业余项目，我想在加载时只需显示旋转器即可。我可以检查.complete标志...谢谢！ - erik

Answer 2

虽然这是一个老问题，但有必要知道Image对象也有一个onload事件。与在循环中检查complete相比，使用它通常更好。

示例用法（未经实际检查是否有效）：

var numImagesLoaded = 0;
function incrementAndCheckLoading(){
    numImagesLoaded++;
    if(numImagesLoaded == 2){
        // Do some stuff like remove loading screen or redirect to other URL
    }
}    

image1 = new Image();
image1.src = "image1.jpg"
image1.onload = incrementAndCheckLoading;
image2 = new Image();
image2.src = "image2.jpg"
image2.onload = incrementAndCheckLoading;

- dtech

Answer 3

这是一个展示HTML5 CSS动画的优秀资源。 http://slides.html5rocks.com/#css-animation

 @-webkit-keyframes pulse {
  from {
    opacity: 0.0;
    font-size: 100%;
  }
  to {
    opacity: 1.0;
    font-size: 200%;
  }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

这展示了如何创建一个加载状态栏： http://slides.html5rocks.com/#semantic-tags-2

 <progress>working...</progress>

幻灯片中还有很多其他的例子，可能包含您需要的内容。

- jamesmortensen

Answer 4

你可以在HTML5中使用<progress>元素。请参见此页面以获取源代码和实时演示。 http://purpledesign.in/blog/super-cool-loading-bar-html5/ 这里是进度元素...

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

这将从20开始具有加载值。当然，仅使用<progress>元素是不够的。您需要在脚本加载时移动它。为此，我们需要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>

希望这能为您提供一个起点。

- Raj Nandan Sharma

Answer 5

由于这个问题标记为html5 - 我想我们可以做得比旋转gif更好。一个更现代的替代方案：

http://fgnass.github.io/spin.js/

- Fdr