2014年12月25日木曜日

iOSのUIWebViewで画像を確実に読み込みさせる方法

AndroidとiOSのアプリ開発で、WebView(iOSでは、UIWebView)で、HTMLを表示する場合に
画像がうまく読み込めない問題に遭遇した。
ちなみに、Androidは問題ないけど、iOSで発生。
そのときの解決方法をメモとして残しておきます。

iOS7系、8系の実機端末で動作確認をしていた。

かつ、UIWebViewにHTMLを設定して表示するだけの初期表示は問題はなし。

その後に、JQueryの$("#{該当するid}").html({該当するタグ}) などで、部分的に
HTMLの内容を変更したときに、その変更内容にimgタグが含まれている場合に
imgタグのsrc属性に設定している画像が存在するにもかかわらず
画像が読み込みを行わないという事象だった。


解決には、次の手順で行った。

1. 次の関数を作成。
  (imgタグのwidthが0だったら、画像が読み込まれてないと判断し
   0.1秒後に再度、本関数を再度呼び出して、imgタグのsrc属性を設定し直して、画像を読み込ませるようにする。)

  1. function editImage(id, imgSrc) {
  2.  
  3.     var img = new Image();
  4.  
  5.     if (imgSrc == null) {
  6.         img.src = $(id).attr('src');
  7.     } else {
  8.         img.src = imgSrc;
  9.     }
  10.  
  11.     if (img.width == 0) {
  12.         setTimeout(function() { editImage(id); }, 100);
  13.         img = null;
  14.         return;
  15.     } else {
  16.         $(id).attr('src', img.src);
  17.         $(id).css('visibility', 'visible');
  18.         img = null;
  19.     }
  20. }
2. 前述した問題が発生するHTMLの内容変更後に、1.で作成した関数を実行する。