イメージが読み込まれる前に img.onload が起動しているようです。キャンバスに画像を描画しようとしています。
これが私のコードです：
var tileAtlas = [ ];
function loadAtlasJSON() {
for (var i = 0; i < JSONpaths.length; i++) {
loadJSON(
{
fileName: JSONpaths[ i ],
success: function( atlas ) {
console.log(atlas.id);
addToTileAtlas( atlas );
}
}
);
}
};
function addToTileAtlas( atlas ) {
atlas.loaded = false;
var img = new Image();
img.onload = function() {
// Logs way too soon from the previous console.log
console.log(atlas.id);
atlas.loaded = true;
console.log(atlas.loaded);
};
// Always returns false, so onload has not fired yet
console.log(atlas.loaded);
img.src = atlas.src;
// Store the image object as an "object" property
atlas.object = img;
tileAtlas[ atlas.id ] = atlas;
}
このコードの後、すべてが true になるまで、各アトラスの .loaded をチェックし続けます。それらがすべて真の場合、キャンバスに画像を描画しますが、何も表示されません。
しかし、画像を描画する前にタイムアウト (たとえば 1000 ミリ秒) を設定すると、画像は正常に描画されます。これにより、画像が実際に読み込まれる前に .onload が起動していると思われます。
さらに、ログのタイムスタンプが互いに近すぎて、各画像の読み込み時間が 20 ～ 90 kb であることを説明できないと思います。
[16:12:06.209] "ground"
[16:12:06.210] false
[16:12:06.211] "ground-collision"
[16:12:06.211] false
[16:12:06.213] "objects-collision"
[16:12:06.213] false
[16:12:06.223] "ground"
[16:12:06.223] true
[16:12:06.224] "ground-collision"
[16:12:06.224] true
[16:12:06.225] "objects-collision"
[16:12:06.225] true
console.log(atlas.loaded);
img.onload 割り当ての下ではまだ false が返されるため、onload に割り当てられた関数がすぐに呼び出されないことはわかっています。
画像のキャッシュを保持していないことがわかっている複数のブラウザーでこれを確認しました。私のメイン ブラウザである Firefox では、network.http.use-cacheandbrowser.cache.offline.enableを false に設定しました。
MAMP を使用して localhost Apache サーバーでこのコードをテストしていますが、それが関連しているかどうかはわかりません。
タイムアウトを使用して画像の表示を遅らせることができることはわかっているので、JSON の読み込みと img.src のパスが正しいことも意味します。
img.onload の起動が早すぎるため、いくつかの原因しか考えられません。
- ブラウザには画像がキャッシュされているため、読み込まれたと見なされます。しかし、これは、リフレッシュしても画像が表示されない理由を説明していません。
- 私の .onload 構文/使用法が正しくありません。
ご協力いただきありがとうございます！