我正在构建一个涉及声音和图像的简单动画网络应用程序。我想要它,以便当用户进入站点时,他们会看到“正在加载”页面,并且当所有图像和音频文件完成加载时,它会调用一个启动动画的函数。到目前为止,我的代码大致是这样的:
var img1, img2;
var sound1, sound2;
function loadImages() {
img1=new Image();
img1.src="...";
img2=new Image();
img2.src="...";
img1.onload=img2.onload=handleImageLoad;
}
function loadSound() {
createjs.Sound.registerSound({id:"sound1", src:"sound1.wav"});
createjs.Sound.registerSound({id:"sound2", src:"sound2.wav"});
createjs.Sound.addEventListener("fileload", handleSoundLoad);
}
function handleImageLoad(e) {
//Do something when an image loads
}
function handleSoundLoad(e) {
//Do something when a sound loads
if(e.id=="sound1") sound1 = createjs.Sound.createInstance("sound1");
else if(e.id=="sound2") sound2 = createjs.Sound.createInstance("sound2");
}
$(document).ready(function() {
//overlay a "now loading" .gif on my canvas
...
...
loadSound();
loadImages();
}
// call this when everything loads
function start() {
//remove "now loading..." overlay .gif
...
...
//start animating
}
handleImageLoad()
并且handleSoundLoad()
彼此独立调用,所以我不能依赖它们来调用start()
. 我怎样才能确定所有内容何时加载?我可以使用什么回调函数来实现这一点?