Javascript 在 HTML5 中创建加载屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4580426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a loading screen in HTML5
提问by the_e
I am having some issues finding a decent tutorial for generating a loading style screen with regards to HTML5. To be quite honest I'm not sure exactly where to begin...
我在寻找一个体面的教程来生成关于 HTML5 的加载样式屏幕时遇到了一些问题。老实说，我不确定从哪里开始......
My project is essentially a simple HTML5 game, where I'll be loading in various sprite sheets and tilesets. They'll be reasonably small, but I'd like to show a little loading spinner instead of a blank screen while all the resources are loaded.
我的项目本质上是一个简单的 HTML5 游戏，我将在其中加载各种精灵表和图块集。它们会相当小，但我想在加载所有资源时显示一个小的加载微调器而不是空白屏幕。
Much appreciated if somebody could point me in the right direction, be it decent links or code samples to get me going...my Google-fu is lacking today!
如果有人能指出我正确的方向，无论是让我前进的体面链接还是代码示例，我都非常感激……我的 Google-fu 今天缺少！
For clarification, I need to figure out how to load the resources themselves, as opposed to finding a spinner. For instance, how to calculate that X% has loaded.
为了澄清起见，我需要弄清楚如何自己加载资源，而不是找到一个微调器。例如，如何计算 X% 已加载。
Edit 2
编辑 2
Silly me, I can just check for <variable>.image.complete. Voted to close.
傻我，我可以检查一下<variable>.image.complete。投票关闭。
采纳答案by Chris Laplante
This website is excellent for animated loading gifs: http://ajaxload.info/. An overlay can be used to display the image and also prevent interaction with the page while it is loading. You can use a div, position it above everything else (z-index) and set the width and height to 100%.
该网站非常适合加载 gif 动画：http: //ajaxload.info/。叠加层可用于显示图像并防止在加载页面时与页面交互。您可以使用 div，将其z-index放置在其他所有内容之上 ( ) 并将宽度和高度设置为100%。
回答by dtech
An old question, but it is usefull to know that the Image object also has an onload event. It is often way better to use that than check for complete in for example a loop.
一个老问题，但知道 Image 对象也有一个 onload 事件很有用。使用它通常比在循环中检查是否完成要好得多。
Example usage (not actually checked if working):
示例用法（如果工作没有实际检查）：
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;
回答by jmort253
This is an excellent resource for demonstrating HTML5 CSS animation. http://slides.html5rocks.com/#css-animation
这是演示 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;
}
This demonstrates how to create a loading status bar: http://slides.html5rocks.com/#semantic-tags-2
这演示了如何创建加载状态栏：http: //slides.html5rocks.com/#semantic-tags-2
<progress>working...</progress>
There are plenty of other examples on those slides as well that may have what you're looking for.
这些幻灯片上还有许多其他示例，它们可能包含您正在寻找的内容。
回答by Raj Sharma
You can use <progress>element in HTML5. See this page for source code and live demo.
http://purpledesign.in/blog/super-cool-loading-bar-html5/
您可以<progress>在 HTML5 中使用元素。有关源代码和现场演示，请参阅此页面。
http://purpledesign.in/blog/super-cool-loading-bar-html5/
here is the progress element...
这是进度元素...
<progress id="progressbar" value="20" max="100"></progress>
this will have the loading value starting from 20. Of course only the element wont suffice. You need to move it as the script loads. For that we need JQuery. Here is a simple JQuery script that starts the progress from 0 to 100 and does something in defined time slot.
这将使加载值从 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>
Add this to your HTML file.
将此添加到您的 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>
Hope this will give you a start.
希望这会给你一个开始。
回答by Fdr
Because this question is tagged with html5 - I think we can do better than a spinner gif. A more modern alternative:
因为这个问题是用 html5 标记的 - 我认为我们可以比微调 gif 做得更好。一个更现代的选择：
