当前位置：文江博客话题详情

使用 HTML5 创建加载屏幕

发布于 2024-10-09 21:38:24 字数 368 浏览 3 评论 0原文

我在寻找一个合适的教程来生成 HTML5 的加载样式屏幕时遇到了一些问题。老实说，我不确定从哪里开始...

我的项目本质上是一个简单的 HTML5 游戏，我将在其中加载各种精灵表和图块集。它们会相当小，但我想在加载所有资源时显示一个小的加载旋转器而不是空白屏幕。

如果有人能给我指出正确的方向，无论是体面的链接还是代码示例来帮助我前进，我将不胜感激……我的 Google-fu 今天缺乏！

为了澄清起见，我需要弄清楚如何加载资源本身，而不是寻找微调器。例如，如何计算X%已加载。

编辑2

愚蠢的我，我只能检查.image.complete。投票结束。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鸢与 2024-10-16 21:38:24

这个网站非常适合动画加载 gif：http://ajaxload.info/。覆盖层可用于显示图像，并防止在加载页面时与页面交互。您可以使用 div，将其放置在其他所有内容之上 (z-index)，并将宽度和高度设置为 100%。

回复收藏 0 原文

小鸟爱天空丶 2024-10-16 21:38:24

这是一个老问题，但了解 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;

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.

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;

回复收藏 0 原文

简单气质女生网名 2024-10-16 21:38:24

这是演示 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>

有这些幻灯片上还有很多其他示例，可能有您正在寻找的内容。

This is an excellent resource for demonstrating HTML5 CSS animation.
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

 <progress>working...</progress>

There are plenty of other examples on those slides as well that may have what you're looking for.

回复收藏 0 原文

你是暖光i 2024-10-16 21:38:24

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

希望这会给您一个开始。

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/

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.

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

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

回复收藏 0 原文