Question

I am building an asset loader for a simple Object-Oriented game engine in HTML5. Right now I know of two ways to make the asset loader (summarized below) and I prefer the second approach. My question is, is the second way guaranteed to always work for all browsers?

For clarity:

• the name of the class in question is AssetLoader,
• the method to load all assets is called loadAssets(),
• the main class is Game,
• and the main game loop is runGameloop().

Approach 1

Create an instance of AssetLoader that will persist throughout the entire game. When loadAssets() is called at game start, it will create a dictionary that will hold key/value pairs of all the assets for the duration of playtime.

When a sprite requires an image, it will query AssetLoader with a given name (ex. “Archer”), and the instance will return the appropriate image for the sprite to use.

Approach 2

Create an instance of AssetLoader that will not persist throughout the game (it will be called once and not be assigned to any instance variables).

The instance’s responsibility will be to query the server for each asset which will cause the browser to cache the assets; much like:

function AssetLoader()
{

    ...

    self.loadAssets = function(runGameloop)
    {
        self.tempImage = new Image();

        $(self.tempImage).load(function()
        {
            self.assetsLoadedSoFar += 1;
            if(self.assetsLoadedSoFar === self.totalAssets)
            {
                self.runGameloop();
            }
        });

        self.tempImage.src = "assets/sprites/archer/archerSpriteSheet.png";
    }

    ...

}

Now whenever a sprite needs an image, that image should now be cached in the browser and it just loads it with a new Image() object without going through AssetLoader.

Why I prefer approach 2

1.) I want to avoid introducing unnecessary layers of abstraction to the engine, I don’t want to have to go through AssetLoader everytime I want to load an asset.

2.) If I have alot of assets in the game, I don’t want them all to be simultaneously loaded in a single instance of AssetLoader. Perhaps someone can correct me but wouldn’t having all those resources loaded at once unnecessarily strain the game?

So right now I have a working version of Approach 2 here and am mostly happy with it but what I need to know is: “is the browser guaranteed to always cache a given image using approach two?” or is that something I can’t rely on? Are there certain configurations in which automatic caching might be turned off? (is that even possible?). Do you have any other approaches you think are better? Thanks alot for your time!

Answer 1

I don’t think you can rely on the browser cache. It is possible to disable automatic caching and I imagine it is reasonably common for people to do just that.

I’ve done exactly this in the past for two reasons:

1. Low disk space on a computer shared by the family (multiple separate accounts)
2. When developing, in order to ensure that the latest changes are always visible on page refresh

Also, caching is disabled in incognito / private browsing modes of Chrome / Firefox.