HTML and CSS Reference
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 audio
Loaded() 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 then 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
We will start this process by creating some variables that are global in scope to all the
three new variables— loadCount , itemsToLoad , and buttonSheet :
This variable will be used as a counter. When an asset has preloaded we will in-
crement this value.
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.
This variable will hold a reference to the audiocontrols.png image shown in Fig-
ure 7-5 . We will use it to create our audio controls.
Here is the code with values included:
var loadCount = 0;
var itemsToLoad = 2;
To make these variables scope only to the Canvas app and not globally
final version of the code in Example 7-6 shows that process.
Inside the eventWindowLoaded() function we now need to set the event handlers for the
assets to load. For the audioElement , we will change the handler from audioLoaded to
To load and use the audiocontrols.png image, we first create a new Image() object and
place a reference to it into the buttonSheet variable. Next, we set the src attribute of
the new Image object to the image file we want to load—in this case, audiocon-
trols.png . We then set the onload event handler of the Image object to itemLoaded , which
is the same event handler we used for the audio file: