HTML and CSS Reference
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 func-
variables— loadCount , itemsToLoad , and buttonSheet :
This variable will be used as a counter. When an asset has preloaded we will increment
execute the application in the HTML page.
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 ;
encapsulate thiscodeina function() .Thefinalversionofthecodein Example A-1 showsthatpro-