I am creating a resource loader for a simple object oriented game engine in HTML5. I currently know of two ways to make an 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 of loading 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 game. When loadAssets () is called when the game starts, it will create a dictionary that holds the key / value pairs of all assets for the duration of the play.

When a sprite requires an image, it will ask for an AssetLoader with the given name (for example, "Archer"), and the instance will return the appropriate image for the sprite to be used.

Approach 2

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

Instance responsibility would be to request the server for each asset, which will cause the browser to cache the assets; as well as:

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 when the sprite needs an image, that image should now be cached in the browser and it just loads it using a new Image () object without going through the AssetLoader.

Why I prefer approach 2
1.) I want to avoid introducing unnecessary layers of abstraction into the engine, I don't want to go through the AssetLoader every time I want to load an asset.
2.) If I have a lot of assets in the game, I don't want all of them to be loaded at the same time into one instance of AssetLoader. Maybe someone can fix me, but won't all these resources load immediately without having to strain the game?

So now I have a working version of the <approach here, and I'm mostly happy, but I need to know: is the browser guaranteed to always cache a given image using approach two? Or is this something I cannot rely on? Are there certain configurations in which automatic caching can be disabled? (is it possible?) Do you have other approaches that you think are better? Thanks a lot for your time!