起動時に一部のデータをロードする html5 アプリがあり、すべてがロードされた後、ユーザーはこのデータを参照できます。各データ オブジェクトには、画像、png ファイルが関連付けられています。これは、帯域幅が限られているモバイル デバイスでうまく機能します。ユーザーがデータを閲覧すると画像が表示されますが、サーバーから画像を読み込むのに時間がかかるため、画像の表示が遅くなるというユーザー エクスペリエンスが発生します。
そのため、ユーザーがデータを閲覧したときに画像がすぐに表示されるように、画像をプリロードしたいと考えています。したがって、すべてのデータを実行し、各画像に対して次のコードを実行するループがあります。
preloadImage: function(url)
{
if(url)
{
// preload image
if (document.images) {
var img1 = new Image();
img1.src = url;
}
}
}
これは、これを行うためのかなり簡単な方法です。
読み込む画像が数百枚あります。これは、ほとんどの場合にうまく機能します。
問題
Android 4.1.2 を搭載した Samsung Galaxy SIII でこれをテストすると、
"RangeError: Maximum call stack size exceeded".
約 20 ~ 30 回の preloadImage 呼び出しの後にこれを取得します。私の推測では、Android html/javascript エンジンには、一度に保留できる非同期呼び出しの数に何らかの制限があると思われます。
PC (IE9、Chrome、Firefox) や Apple デバイスではこの問題は発生しません。
この問題に対する啓発、ヒント、または解決策はありますか?