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函數不觸發

回答

相關問題