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属性を設定し直して、画像を読み込ませるようにする。)

function editImage(id, imgSrc) {

    var img = new Image();

    if (imgSrc == null) {
        img.src = $(id).attr('src');
    } else {
        img.src = imgSrc;
    }

    if (img.width == 0) {
        setTimeout(function() { editImage(id); }, 100);
        img = null;
        return;
    } else {
        $(id).attr('src', img.src);
        $(id).css('visibility', 'visible');
        img = null;
    }
}
2. 前述した問題が発生するHTMLの内容変更後に、1.で作成した関数を実行する。