javascript - 确保内容准备好在时间有限的环境中提供服务的最佳方法是什么？

Question

我目前正在开发一个需要使用图像的 HTML/Javascript 游戏。用户有一定的时间来回答问题。我要问的是下载和缓存文件并确保它们准备就绪的最佳方法是什么？是我正在寻找的 AppCache 吗？

Answer 1

您需要延迟游戏循环的执行，直到所有必需的资源都加载完毕。希望您的代码已经足够模块化以允许这样做。

当位于src图像元素的资源被下载时，浏览器会触发一个事件。使用此事件，您可以创建一个基本的预加载解决方案：

var img = new Image();

img.onload = function() {                             
    console.log('Image loaded!');
};

img.src = '/images/my-image.jpg';

扩展此解决方案以迭代您的所有资产。加载它们后，调用开始游戏循环的代码。

有许多可用的预构建解决方案：

• http://www.createjs.com/#!/PreloadJS
• http://thinkpixellab.com/pxloader/
• https://github.com/nandastone/precook-backbone