HTML5 Canvas, 2nd Edition

Loading the Button Assets

Because we are going to load in both an audio file and an image file for this application, we need to employ a strategy that will allow us to preload two assets instead of just one. This process is much like the one we employed in Chapter 6 when we created controls for a video. Previously in this chapter, we used a function named audioLoaded() to make sure the audio was loaded before we started use it. However, that strategy will not work when we have two assets to load. We could create two separate event listeners, but what if we need to load 3, 4, or 10 assets? What we need is a simple way to ensure that we can preload any number of assets before our application executes.

We will start this process by creating some variables that are global in scope to all the functions in the applications. First, outside of all the JavaScript functions, we will create three new variables—loadCount, itemsToLoad, and buttonSheet:

loadCount

This variable will be used as a counter. When an asset has preloaded we will increment this value.

itemsToLoad

This is a numeric value that represents the number of assets we need to load before we can execute the application in the HTML page.

buttonSheet

This variable will hold a reference to the audiocontrols.png image shown in Figure 7-5. We will use it to create our audio controls.

Here is the code with values included:

var loadCount = 0;
var itemsToLoad = 2;
var buttonSheet;
var audioElement;

Note

To make these variables scope only to the ...