Image.onload函数不触发

ReferenceError: imageNoteTaker is not defined 

layer.add(imageNoteTaker);

上面的错误是在尝试使用kinetic.js进行简单补间时出现的。我的项目正试图将动画与音频同步。播放音频时，会频繁调用“sync（）”功能。当音频达到4.85s时，这个函数inturn调用函数'animation1（）'。该函数中的代码引起了我的问题。Image.onload函数不触发

这里试图执行'layer.add（imageNoteTaker）;'行，可变图像NoteTaker未定义。但是定义imageNoteTaker的代码在image.onload（）方法之前存在。但控制并没有完全跳过这一点。

错误是发生在以下部分：

var imageObj = new Image(); 
    imageObj.src="images/note_taker.png";   
    imageObj.onload = function(){ 
     imageNoteTaker= new Kinetic.Image({ 
      x: stage.getWidth()/2.35, 
      y: stage.getHeight()/1.5, 
      width: 75*202/100, 
      height:75*350/100, 
      image: imageObj 
     }); 
    } 
    layer.add(imageNoteTaker); 
    layer.draw();

这是我的全部代码：

//Variable Declaration 
var audioId=document.getElementById("audioId"); 
var currentAnimation="none"; 



//Kinetic Library Setup 
var stage = new Kinetic.Stage({ 
    container: 'moving', 
    width: 800, 
    height: 545 
}); 

//Layer Declaration 
var layer = new Kinetic.Layer(); 
stage.add(layer); 


//Function called 3-4 times in a second while playing audio 
var sync=function(){ 
    var currentPosition = audioId.currentTime; 
    console.log("direct from audio tag: "+currentPosition); 
    currentPosition=currentPosition.toFixed(2); 
    console.log("after rounding : "+currentPosition); 
    switch(true){ 
     case rangeGenerator(5.85,currentPosition): 
      console.log(currentAnimation + "is CurrentAnimation"); 
      if(currentAnimation!="animation1"){ 
       currentAnimation="animation1"; 
       animation1(); 
      } 
      break; 
     default: 
      console.log("default"); 
    } 
}; 




//Function used in sync() function to check a value is in particular range 
var rangeGenerator=function(value,currentPosition){ 
    if(Math.abs(currentPosition-value)<.25){ 
     console.log(currentPosition+"dfd"+"value"); 
     return true; 
    } 
    else{ 
     return false; 
    } 
}; 


//Function that triggers the first animation; NoteTaker 
var animation1=function(){ 
    console.log("Animation1"); 
    //Image Note_Taker Initialisation 
    var imageObj = new Image(); 
    imageObj.src="images/note_taker.png";   
    imageObj.onload = function(){ 
     imageNoteTaker= new Kinetic.Image({ 
      x: stage.getWidth()/2.35, 
      y: stage.getHeight()/1.5, 
      width: 75*202/100, 
      height:75*350/100, 
      image: imageObj 
     }); 
    } 
    layer.add(imageNoteTaker); 
    layer.draw(); 

    console.log("Tweening..."); 
    var tween = new Kinetic.Tween({ 
     node: imageNoteTaker, 
     duration: 1, 
     x: stage.getWidth()/2.35, 
     y: stage.getHeight()/4.0 
    });  

    tween.play(); 


}; 

//On window resize, resizing stage too. 
window.onresize = function(event) { 
    stage.setWidth((window.innerWidth/100) * 80); // 80% width again 
};

如何删除这个错误？

来源

2013-11-27 Foreever

onload方法通常在加载对象时调用。加载完成后，加载事件被触发。然后该事件触发该方法。

如果是这样，当您调用animation1函数时，应该在执行代码时跳过onload方法。因此变量没有被定义。

我建议在类中放置可变图像NoteTakerglobal - 将其置于currentAnimation的定义之下 - 并且只有在设置变量时才调用layer.add（...）。

来源

2013-11-27 09:36:14 kysna

这句话是什么意思，“把它放在currentAnimation的定义下”。 – Foreever

//变量声明 var audioId = document.getElementById（“audioId”）; var currentAnimation =“none”; var imageNoteTaker = null; – kysna

如果我声明它是全局的，那么另一个错误显示说imageNoteTaker为空。 – Foreever

Image.onload函数不触发

回答

相关问题