質問: 1.0; context.drawImage(img_last, 0, 0, width, height); }); } loadedCount++; }, false); } } ``` 処理の流れとしては、 1引数として渡されたsrc_arr配列内の画像をimages配列に格納していく。 2images配列内の全ての画像が読み込まれるまで待ち、 3images配列内の全ての画像が読み込まれたら、images配列内の画像を順に合成する。 4全ての画像の合成が終わったら、multiply関数によって引数として渡されたshade_img画像を先ほどの合成画像に乗算合成する。 5乗算合成後、必ず最後に合成したい画像を先ほどの乗算画像に合成する。 しかし、上記の処理を行っても、AB'が一瞬表示された後にABCD'が表示されたり、画像DがAB'に合成された後にCが乗算合成されてしまったりします(画像AB'は問題なしのように思います)。 このようなことが起こるのはごくたまにといった感じなのですが、起こらないようにしたいです。 理想としては、全ての処理が上記の順番で行われ(途中の画像が表示されたりすることなく)、最終画像ABCD'が表示されるという流れです。 どこかおかしいところ、解決策などをアドバイス頂けると非常に助かります_(._.)_ ### 補足情報 画像AB'を作成するにあたっては、以下の記事を参考にしました。 http://qiita.com/akase244/items/9f3c60219f903254a6e2
回答: コード全体が示されていないので推測です。 画像の読み込みは非同期で行われるのですが画像の読み込み順については考慮されてますでしょうか? 単純に上から実行すると、画像のサイズや通信の状況により読み込み完了順が、実行順と異なることは往々にしてあります。 もし制御されていない場合はまず、DeferredやPromiseなどを使って、画像の読み込みがすべて完了してから処理を開始するようにしてみてください。