在开始动画之前预加载所有声音和图像

Preload all sound and images before starting animation

本文关键字：声音 图像 加载 开始 动画      更新时间：2023-09-26

我正在构建一个简单的动画Web应用程序，涉及声音和图像。我希望它使用户进入站点时会看到一个"正在加载"页面，并且当所有图像和音频文件加载完成后，它会调用启动动画的函数。到目前为止，我的代码大致是这样的：

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()。我如何确定何时加载所有内容？我可以使用哪些回调函数来实现此目的？

使用内置的 SoundJS registerSound 方法还不错，但 PreloadJS 会在单个队列中同时处理声音和图像（以及其他类型）。查看 PreloadJS GitHub 中的示例。

http://preloadjs.com 和http://github.com/CreateJS/PreloadJS/

这可能不是最好的解决方案，但我以这种方式做了类似的事情： 

var lSnd = false;
var lImg = false;
$(document).ready(function(){
 setInterval(checkLoadComplete,1000);
});
function loadSound(){
  //loadingSound
  //on load complete call= soundLoadingComplite();
}
function soundLoadingComplite(){
  //do some stuff
  lSnd = true;
}
function loadImages(){
  //loadingImages
  //on load complete call= imageLoadingComplite();
}
function imageLoadingComplite(){
  //do some stuff
  lSnd = true;
}
function checkLoadComplete(){
  if(lSnd&&lImg){
    startAnimation();
    //clear interval
 }
}

希望这有帮助。

我会这样做：

function loadSound(){
    songOK = false;
    song = new Audio()
    song.src = uri;
    song.addEventListener('canplaythrough', function(){ songOK = true; }, false)
    return songOK;
}
function loadImage(){
    pictOK = false;
    pict = new Image();
    pict.src = uri;
    pict.onload = function (){
        pictOK = true;
    }
    return pictOK;
}
function loadMedia(){
    startNowLoading();
    if( loadSound() && loadImage())
        stopNowLoading();
    else
        kaboom();   //something went wrong!        
}
$(document).ready(function(){
    loadMedia();
}

这应该允许您按顺序执行函数。

相关文章：