20-加载按钮资源

7.5.2　加载按钮资源

在应用程序中，音频文件和图像文件都要加载。需要有一个策略，使得可以预加载两种资源，而不只是一种。这个过程与在第6章中创建视频控制器时采用的策略非常相似。本章的前面使用了一个名为audioLoaded函数，以确保在开始使用音频之前加载它。然而，当有两个要加载的资源时，这一策略将无法正常工作。用户可以创建两个单独的事件监听器，但如果需要加载3个、4个或10个资源时该怎么办？我们需要的是一个简单的方法，以确保在应用程序执行时，可以预载任何数量的资源。

通过创建一些对应用程序中所有函数都有效的全局变量来启动这个过程。首先，在所有JavaScript函数外面创建3个新变量：loadCount、itemsToLoad和buttonSheet。

• loadCount：该变量是一个计数器。当一个资源完成预加载后，将变量值加1。
• itemsToLoad：这是一个数值，表示在HTML页面中执行应用程序之前需要加载的资源的数量。
• buttonSheet：这个变量保存了一个对图7-5所示的audiocontrols.png图片的引用。下面将使用它来创建按钮。

下面的代码包括了定义变量和赋予初始值。

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

提示

为了使这些变量仅在Canvas画布应用范围中有效，而不是在所有JavaScript范围内有效，可以使用function()封装这段代码。在例7-6代码最终版中将演示这个过程。

和上一章讲的视频播放软件一样，这里也需要创建一些变量来设置按钮接受点击的最短间隔。

var buttonWait = 5;
var timeWaited = buttonWait;

在 eventWindowLoaded()函数中，需要为要加载的资源设置时间处理函数。对于audioElement变量，把处理函数从audioLoaded修改为itemLoaded。

audioElement.addEventListener("canplaythrough",itemLoaded,false);

为了加载和使用audiocontrols.png图片，首先要创建一个Image()对象，并在buttonSheet变量中设置对该变量的引用。接下来，将Image对象的src属性设置为将要加载的图片文件，即audiocontrols.png。然后，将Image对象的onload事件处理函数设置为itemLoaded。对音频文件也同样使用这个事件处理函数。

buttonSheet = new Image();
buttonSheet.onload = itemLoaded;
buttonSheet.src = "audiocontrols.png";

现在，需要创建itemLoaded()事件处理函数。这个函数相当简单：每次调用时，将loadCount变量加1；然后检测loadCount的值，看它是否是等于或者超过要预加载项目的数量，也就是itemsToLoad变量的值。如果是，就调用canvasApp()函数，启动程序。

function itemLoaded(event){
　 loadCount++;
　 if (loadCount >= itemsToLoad){
　　　canvasApp();
　 }
}