在HTML5中创建加载屏幕

Question

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

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

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

---

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

---

编辑2

傻我,我可以检查一下<variable>.image.complete.投票结束.

Answer 1

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

Answer 2

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