1
  1. Firefox 10.0.2 を使用して、このプロジェクトから Framework.html を開きます: http://code.google.com/p/unitspeeds-vhh/ (編集: アイコンをプリロードしています。必要に応じて、このリビジョンを使用してください。元の問題をデバッグしてみてください。)
  2. F5 を押して更新します。
  3. F5 をさらに数回非常にすばやく押します。

予想される: ユニット アイコン (コード内の unitIconObj) は常にレンダリングする必要があります。
Actual : 最初のページの読み込みではレンダリングされません。最初の F5 は、通常、すべてのアイコンを表示します。F5 を非常に速く繰り返すと、すべてではありませんがほとんどのアイコンが表示されます。

私が解決しようとしている基本的な問題は、最初にアイコンが正しくレンダリングされないことです。これは、画像をプリロードする必要があることを意味すると思います。私はこれを行うためにいくつかの異なる方法を試してきましたが、動作は厳密には再現可能ではなく、リフレッシュとキャッシュについて自分で理解するのに十分な知識がないと思います. アイコン自体は非常に小さな画像ファイルなので、これがまったく問題ではないことに驚きました。

乱雑なコードと質問で申し訳ありません - 私は初心者です! どんなアドバイスでも大歓迎です。

編集：画像ファイルをロードしてレンダリングする部分は次のとおりです。

for (var x = 0; x < sortedOutput.length; x++)
    {
        // Draw the unit icon 
        var unitIconObj = new Image();
        if (sortedOutput[x].Filename == "--") // I don't have real icons for a few units
        {
            unitIconObj.src = "Icons/Creep.jpg";    
        } else 
        {
            unitIconObj.src = "Icons/" + sortedOutput[x].Filename + ".jpg";
        }
        speedContext.drawImage(unitIconObj, ChartBuffer+textBlock+2+4*iconSpace, 50+(x*iconSpace), BarHeight, BarHeight);

    }
4

1 に答える 1

0

これを変更して、画像の onload イベントが発生するまで drawImage 関数の呼び出しを待機するようにしましたか。これにより、他の魔法が発生する前に画像が確実に読み込まれます。

for (var x = 0; x < sortedOutput.length; x++)
    {
    var unitIconObj= new Image();  
    unitIconObj.onload = function(){  

          speedContext.drawImage(unitIconObj, ChartBuffer+textBlock+2+4*iconSpace, 50+(x*iconSpace), BarHeight, BarHeight);  

    };  
    if (sortedOutput[x].Filename == "--") // I don't have real icons for a few units
        {
            unitIconObj.src = "Icons/Creep.jpg";    
        } else 
        {
            unitIconObj.src = "Icons/" + sortedOutput[x].Filename + ".jpg";
        } 
   }

ここでこれを見つけました：https://developer.mozilla.org/en/Canvas_tutorial/Using_images

于 2012-04-16T21:07:38.793 に答える