0 

    function LoadResources(){   
      alert("In load socket");

    var canvas   = document.getElementById("myCanvas");
    var context  = canvas.getContext("2d");
    var tiles= new Array();

    var loadedCount=0;
    for (x = 101; x <= 155; x++) {
      var imageObj = new Image(); // new instance for each image
      imageObj.src = "Resources/ClassicCardImages/deck1/dood_deck/"+x+".GIF";

      imageObj.onload=function(){
        loadedCount++;
        if(loadedCount==55){
            cardsImagesLoaded();
        }else {
          alert(loadedCount);
        }
      };
      tiles.push(imageObj);

     }
  };

したがって、関数 LoadResources() を呼び出すと、「ロード ソケット内」でアラートが表示されますが、imageObj.onload 関数内ではアラートが表示されません。

window.onload 関数、つまり "window.onload = function() {..}" とその関数を、html ドキュメントの本文で使用できます。

さらに、Google chromeで実行しています。chromeのonloadなどに問題がありますか。

4

2 に答える 2

1

onload関数が1回だけ呼び出された場合でも（画像が完全に読み込まれた時点で）読み込みカウンターを増やしようとしているため、アラートを何度もトリガーする方法はありません。私にとって、あなたが何をしようとしているのかははっきりしていません。とにかく、onload関数を使用して複数の画像をロードする場合のベストプラクティスは、クロージャーを使用することです。そうしないと、各反復で、ループの最後に最後の画像のみがロードされる場合があります。クロージャとは何かについては詳しく説明しませんが、原則は次のようなものです。

for (var i = 0; i< 4; i++) {
    var imgObj = new Image();
    imgObj.onload = (function(img) {

        return function () {
            ctx.drawImage(imgObj, 0, 0);
        }
    })(i);

    imgObj.src = 'image.png';
}

iこのように、新しい関数を呼び出すことにより、各反復での値を保持する新しい実行コンテキストを作成します。

于 2012-08-02T07:05:34.447 に答える
0

あなたのコードに少しだけヘルプを追加しています。

あなたがやっている方法で関数を割り当てるには、以下の方法で行う方が安価です。

 for (x = 101; x <= 155; x++) {
      var imageObj = new Image(); // new instance for each image
      imageObj.src = "Resources/ClassicCardImages/deck1/dood_deck/"+x+".GIF";

      imageObj.onload= imageOnLoad;
     }
function imageOnLoad(){
        loadedCount++;
        if(loadedCount==55){
            cardsImagesLoaded();
        }else {
          alert(loadedCount);
        }
      };
      tiles.push(imageObj);
}
于 2012-08-02T02:37:30.023 に答える