HTML and CSS Reference
In-Depth Information
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
functions in the applications. First, outside of all the JavaScript functions, we will create
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;
var buttonSheet;
var audioElement;
To make these variables scope only to the Canvas app and not globally
to all of JavaScript, you can encapsulate this code in a function() . The
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
itemLoaded :
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:
Search WWH ::

Custom Search