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
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 in-
crement 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
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
:
audioElement.addEventListener("canplaythrough",itemLoaded,false);
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:
