在HTML5中创建加载屏幕 [英] Creating a loading screen in HTML5

问题描述

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

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游戏，我将在各种精灵表中加载和tilesets。它们会相当小，但是我想在加载所有资源时显示一个小的加载微调器而不是空白屏幕。

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.

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

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!

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

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.

编辑2

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

Silly me, I can just check for <variable>.image.complete. Voted to close.

推荐答案

这个网站是极好的动画GIF文件加载： http://ajaxload.info/ 。可以使用叠加层来显示图像，还可以在加载时阻止与页面的交互。您可以使用div，将其置于其他所有位置（ z-index ）并将宽度和高度设置为 100％。

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

这篇关于在HTML5中创建加载屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！