确保内容可以在限时环境中投放的最佳方式？(Best way to make sure content is ready to serve in a time limited environment?)

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

I am currently developing a HTML/Javascript game which requires the use of images. The user has a certain amount of time to answer the question. What I am asking is what is the best way to download and cache files and make sure they are ready? Is it AppCache I am looking for?

最满意答案

您需要延迟游戏循环的执行，直到加载所有必需的资产。 希望您的代码已经足够模块化以实现此目的。

当下载了位于图像元素的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  
You need to delay the execution of your game loop until all the required assets are loaded. Hopefully your code is already modular enough to allow for this.
 
The browser fires an event when the resource located at the src of an image element has been downloaded. Using this event, you can create a basic preloading solution:
 
var img = new Image();

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

img.src = '/images/my-image.jpg';
 
Expand this solution to iterate over all your assets. Once they're loaded, call the code that begins your game loop.
 
There are a number of prebuilt solutions available:
 
 
 http://www.createjs.com/#!/PreloadJS 
 http://thinkpixellab.com/pxloader/ 
 https://github.com/nandastone/precook-backbone