iPad の Safari には画像サイズ制限がある

iPad Safari image limit workaround | Adventures in Code

Pixiv のランキングをスライドショーで表示する Seiga Show を作っていて、なぜか 45位以降の画像が表示されないことがたまにあって調べていたのだが、どうやらiPad の Safari では1ページあたりの画像サイズの合計が 6.5MB を超えると、それ以降の画像が表示できないという問題があるようだ。

2011/05/29 追記 iPad 2 では普通に表示できます。やはりメモリ容量の問題だったみたいです。

Pixivの画像が大体1枚 150k前後なので、150k * 45 = 6,750k となり、大体計算も合うのでほぼ間違いなし。

上記で紹介した記事では、HTML5 の Canvas の drawImage を使えば、この制限を回避できる、と書いてあり、サンプルページを iPad 実機で確認したところ、確かに 10MB までの画像が表示できていた。が、iPhone 3G では Safari ごと落ちてしまうことがほとんどで、表示できても 9MB あたりに制限があるようで、全ての画像は表示できなかった。

~~なので、結局、画像のキャッシュサイズをプログラムで制御し、古い画像(imageタグ) を DOM から破棄していくことで対応するしかなさそう。~~

もう少し解析した結果、Canvas 使う場合でも、明示的に image を解放してあげないと、GC の対象にならないようなので、最終的には以下のコードで上手く動作した。

var image = new Image();
image.onload = function() {
  // load 後の処理
  var c = document.getElementById('canvas');
  var ctx = c.getContext('2d');

  c.width = image.width;
  c.height = image.height;
  ctx.drawImage(image, 0, 0);
  
  image = null; // ← これ重要
};
image.src = imageSrc;

この問題でもっとも頭が痛いのは、HTTP のステータスとしては 200、つまり正常として返ってくるので、プログラムからエラーを検知できない、という点で、ホントなんとかしてもらいたい。

結局、HTML5 だろうと、ネイティブなアプリと同様メモリ管理を意識しないといけないという当たり前のことなんだけど、PC上の Safari だと起こらない問題なので、忘れがちだし、この辺、「iPhoneアプリケーション開発ガイド　―HTML+CSS+JavaScript による開発手法」にも書いてないので要注意。