タイミングのjavascriptとsrcが変更されますか？

Question

okだから私はこのキーを押すと、これらのjavascriptsを送信するために、矢印キーを使用するこのjavascriptを持っています。私は右（ 'img'）コマンドでイメージを移動させるが、srcの変更と遅延で動くイメージを変更しようとするコラボレーションスクリプトがある。助けて？画像のsrc属性を変更する

は

<script type="text/javascript"> 
document.onkeydown = KeyCheck;  
function KeyCheck(event) { 

    var spacebar=32 
    var KeyID = event.keyCode; 
    switch(KeyID) { 

     case 39: 
     right('img'); 
     document.getElementById('img').src = 'guyr.png'; 
     setTimeout("right('img'); 
     document.getElementById('img').src = 'runr.png'; 
     setTimeout("right('img'); 
     document.getElementById('img').src = 'guyr.png';",100);",100); 
     break; 

    } 

} 
</script> 

Answer 1

あなたがゲームやアニメーションのいくつかの並べ替えをしたい場合は、あなたのゲームループを構築する方法、それについて少しを読み取ろう、アニメーション、など

しかし、あなたは、テストのほんのいくつかの並べ替えを行っている場合このような何かをしようと、美しいコードではなく、アニメーションのアイデアは動作するはずです：

document.onkeydown = KeyCheck; 

function KeyCheck(event) { 

    var spacebar = 32; 
    var KeyID = event.keyCode; 

    switch (KeyID) { 

    case 39: 

     function guy(fn) { 
      right('img'); 
      document.getElementById('img').src = 'guyr.png'; 
      setTimeout(function() { 
       fn(guy); 
      }, 100); 
     } 
     function run(fn) { 
      right('img'); 
      document.getElementById('img').src = 'runr.png'; 
      setTimeout(function() { 
       fn(run); 
      }, 100); 
     } 

     guy(run); 

     break; 
    } 

} 

一つの機能は、アニメーションを継続するためには、パラメータによってそれを受けて、別のものを呼び出します。

Answer 2

非同期GETリクエストをトリガするために起こっている、とブラウザが画像をキャッシュしている前に、最初に遅くなることがあります。あなたは何らかのゲームを実装しているようですね？単一の画像のsrcを変更する代わりに、すべての画像を最初に隠しておき、表示/非表示にする画像のCSS属性をvisibilityに切り替えることができます。こうすることで、読み込み中に必要なすべての画像をプリフェッチし、onkeydownイベントのハンドラとして要素を表示/非表示することができます。