The day for the 0.1 release finally arrived.

The ticket that I’m working on is not fully implemented yet, but has a few pieces working, so if anybody wants to try it, please don’t hesitate.
Any suggestions/comments are more than welcome.

Here is an overview of what has been done, and what I plan to do:
The goal for the Cache module, is to pre-load game resources in the browser. Also, to cache game resources for offline usage.

The module has three public methods:

get() - Loads resources

find() - Retrieves resource by name or url

clear() - Unload single/all resources
Each resource may have alternate sources, so if ones fails to load the other can be loaded.
Once the resource is loaded, it’s stored in an array for further usage:
resources =
{ url: 'path to resource',

name: 'resource key',

data: resourceObject (image, video, audio, document),

alternates: ['path to alternate1', '....']
}, { ... } ]

Before the resource is loaded, the module checks to see if the extension is valid.
The validation occurs by trying to match the resource extension with an array containing all the valid extensions.

Another way I thought to validate the resource, is sending a request, and based on the mime-type contained on the response, determine if the resource is valid or not. The only question is performance issue, and if its really necessary.

Back to the validation:
If the extension is valid, the module tries to load the resource
If the extension is not valid, the module uses the first alternate.
If both ways fail the onError callback is invoked

Once the resource is loaded the onComplete callback is invoked, if there are any errors loading the resource, it then tries to load an alternate, if there are no alternates the onError callback is invoked

The callback chain is not fully implemented yet.
My idea is to count how many resources are there to be loaded.
Every time a resource finishes loading, or fails to load, the counter will decrease by one.
Once the counter reaches zero the onCompleteAll callback is called.

The way it works right now, the onCompleteAll callback is invoked once all the resources are initialized, but not loaded. That’s generates an error because even though the onCompleteAll callback is invoked, the resources are not always loaded in memory.

The clear method will unload a resource from memory.
I’m still not sure how the unload process will happen.
For now, the way I’m implementing, it’s setting the resource object to null, and then removing it from the resources array.
I don’t know if this method will actually remove the resource from memory. I think that by setting the resource to null, the garbage collector should remove it, but I’m not sure. I’ll do some more digging on the subject.

Other way I found to load and unload resources, it’s using URLObjects.
I ran some tests to compare both methods. The one that specifies the src attribute for the elements(video, audio, image) and the other that uses URLObjects.

I didn’t find any difference in the memory consumption of the browser. Maybe there are better ways to check memory consumption, since the one I did was by loading the images in the browser and using the task manager to check how much memory it was consuming.
Here is the link to URLObjects reference:


  • Create different contexts for different levels Use webworkers to load resources
  • Not sure how this would work, since a worker doesn’t have access to the DOM
  • Clean resources from memory
  • Find a way to remove the resources from the memory.
  • Validates different file formats for different browsers
  • Organize the way the callback functions are invoked.
  • Load resources other than images, videos, and audio.
  • Implement app cache/manifest/web storage.
  • Create qunit tests

Here is the link to the Cache module code:

Here is a demo page I’m using to test the module: