我在寻找合适的教程来生成关于 HTML5 的加载样式屏幕时遇到了一些问题。老实说，我不确定从哪里开始......
我的项目本质上是一个简单的 HTML5 游戏，我将在其中加载各种精灵表和图块集。它们会相当小，但我想在加载所有资源时显示一个小加载微调器而不是空白屏幕。
非常感谢有人能指出我正确的方向，无论是体面的链接还是代码示例让我继续前进……我的 Google-fu 今天缺少！
为了澄清，我需要弄清楚如何自己加载资源，而不是寻找微调器。例如，如何计算 X% 已加载。
编辑 2
我真傻，我可以检查<variable>.image.complete。投票结束。
【问题讨论】：
标签： javascript html loading
一个老问题，但知道 Image 对象也有一个 onload 事件是很有用的。使用它通常比在例如循环中检查完成要好得多。
示例用法（未实际检查是否有效）：
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;
【讨论】：
这个网站非常适合动画加载 gif：http://ajaxload.info/。覆盖可用于显示图像并防止在加载时与页面交互。您可以使用 div，将其置于其他所有内容之上 (z-index)，并将宽度和高度设置为 100%。
【讨论】：
这是演示 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>
这些幻灯片上还有很多其他示例，可能包含您正在寻找的内容。
【讨论】：
您可以在 HTML5 中使用 <progress> 元素。有关源代码和现场演示，请参阅此页面。
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>
希望这会给你一个开始。
【讨论】：
因为这个问题是用 html5 标记的 - 我认为我们可以做得比微调 gif 更好。更现代的选择：
【讨论】：