There is much more beyond just loading the images when it comes to things like how to go about figuring out where all the frame index value are if the image is a sprite sheet. However as I see it a lot of that might have to do with the project, there are many ways to go about solving that problem and as such it is required to pick one and more froward. However in any case there is of course still just loading one or more images first so lets get to it.
The first thing I would work out is a main image loader module that I would make in a way that is reusable for more than one project. So this module will just be used to load images and just about everything else that comes to mind should be handled elsewhere.
I will want a main method that I call and pass an object where I attach methods that will be called each time an images loads, and of course when all the images are loaded also. The method that is called each time a file is loaded could be used as a way to create a loading bar for a canvas example, or anything else that I might want to do each time an image is loaded. The on done method will be used to start a canvas example when all the assets are loaded, so I would change a state machine value, or start a project completely in the body of that method.
There are other values that I pass to the options object when calling this which are important, mainly the base URL property and the file count property. The file could property is used to set how many images there are in a path, and the base url is used to set what that path is. I am following a system where each asset has a number from zero up to the the total number of assets minus one. I see a lot of projects that follow this kind of system, if you want to do something else you will have to develop this kind of module differently to allow for human readable names..
So now that I have a simple image file loader module in this section I will be going over a simple example of using it. In this example I will not be doing anything advanced, just using it to load an image and then have some draw method that I can use to draw a cell index from it as the image resource is a sprite sheet.
When it comes to working with sprite sheets I have to figure out certain standards and stick to them when it comes to how sprite sheets or organized. When it comes to skinning a display object with some artwork it is often not just a matter of having a single static image, or a single animation loop. However maybe with some projects I do need to just do that and that will be it.
So for now in this example at least a sprite sheet is just an image that is composed of sections that are 32 by 32 pixels and the number of cell index values is just the width of the image divided by the width of a cell.
So for this example I have a draw.js module that is used to just draw a background to a canvas element, and one additional method that I can use to draw cells from a sprite sheet. For this simple example these will work just fine, but in a real project The methods will differ a lot depending on how I go about formating sprite sheets. For now I am thinking in terms of just a single animation that is a collection of frames from one side of the image to the other.
Here I have a main.js file where I create a canvas element, and use my image loader module to load some image assets from a base url image folder. The images follow a pattern where each image is a number from 0 forward, and is a png image.
So now I just need some html to tie this all together.
So far things seem to work as expected when this example is up and running I have my images displayed in the canvas as expected. I have not yet taken the time to battle test this kind of solution for loading images, but so far it seems to work okay. There is just working out some kind of standard for just loading the images, the issue of how to go about breaking an image down into sections depending on whether or not it is a sprite sheet, or just a background or something to that effect can differ from one project to another. However once i get a good image loader solution worked out then i should be able to carry that code with be from one project to the next.
So far this image loader solution seems to work okay, but I will want to have some more use case examples of it. There is a lot more that comes to mind when it comes to working with sprite sheets such as how to go about having cells of animations organized. However some kind of sprite sheet object constructor should maybe be a part of another project all together. Some images will just be backgrounds and things to that effect, and in any case I do just simple need to load the images first anyway.