在HTML5中创建加载屏幕

时间:2011-01-02 20:43:07

标签: javascript html5 loading

我遇到一些问题,找到一个体面的教程来生成关于HTML5的加载样式屏幕。说实话,我不确定从哪里开始...

我的项目本质上是一个简单的HTML5游戏,我将加载各种精灵表和tilesets。它们会相当小,但我想在加载所有资源时显示一些加载微调器而不是空白屏幕。

非常感谢,如果有人可以指出我正确的方向,无论是体面的链接还是代码样本让我走了......我的谷歌今天缺乏!


为了澄清,我需要弄清楚如何自己加载资源,而不是找到一个微调器。例如,如何计算X%已加载。


编辑2

愚蠢的我,我可以查看<variable>.image.complete。投票结束。

5 个答案:

答案 0 :(得分:10)

此网站非常适合动画加载GIF:http://ajaxload.info/。可以使用叠加层来显示图像,还可以防止在加载页面时与页面进行交互。您可以使用div,将其置于其他所有位置(z-index)之上,并将宽度和高度设置为100%

答案 1 :(得分:9)

一个老问题,但知道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;

答案 2 :(得分: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>

这些幻灯片上还有很多其他的例子,可能有你想要的东西。

答案 3 :(得分:2)

您可以在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>

希望这会给你一个开始。

答案 4 :(得分:1)

因为这个问题用html5标记 - 我认为我们可以做得比旋转器gif更好。一个更现代的选择:

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