webview上で表示させるwebページのかくつきについて（animate）

Question

iphone/androidのwebview上で、画像のみのwebページを表示させるアプリを作成しています。
前提として、htmlやcss,jsファイルや画像ファイル(png)等はすべて端末に保持させており、通信などは行いません。
具体的には、htmlファイルは1つしかなく、body内に画像を表示させ、
画面遷移する際は新しいdivを右から左へスライドさせて入れ替えてネイティプアプリのような動きをさせています。
また、新しい画面を生成する際は、beforeを使って新しいdivを生成・追加しスライドが終わったら遷移前のdivをremoveしています。
リンク等のクリックイベントは0.3秒のウェイトをさせない為、jquery mobileのtapイベントを拾っています。

複数画像のページもあるので、下記のソースのようにすべての画像のloadを検知してから画面遷移させるようにしています。

            var all_img=$(".content:not(.oldPage) img");
            var img_len=all_img.length;
            var loaded_counter=0;
            //すべての画像にロードイベントを設定
            for(var i=0; i<img_len; i++){
                    all_img[i].addEventListener("load",loadFunc);
            }
            function loadFunc(){
                loaded_counter++;
                if(img_len===loaded_counter){
          後続の処理へ
                }
            }

現在パターン①で実装を行っており、画像の数や画像の大きさによってかくつくページがあるのですが、
パターン②のようにtranslate3dを使用しても、期待したスムーズなスライドを実現できませんでした。
表示させる画像を最初に表示するとき一番かくついてしまうように思うのですが、
cssの問題ではなくキャッシュなどの問題ないのか切り分けもできていない状態です。
また、実機で確認したところiPhoneにくらべてandoroid端末だとより一層かくつく動きをしてしまっています。
スムーズなスライドを実現するにはどのような手順を踏めばよいでしょうか。
ご教授お願いいたします。

※objには、画面遷移時に差し替えを行うdiv要素が設定されています。
【パターン①】

	obj.animate({"left":leftValue +"px"},{
            duration:200,
            step:function(){
            },
            complete:function(){
        リンククリックイベントのバインド
        遷移元画面のremove
            }
        });

【パターン②】

        obj.css({
            '-webkit-transform':'translate3d('+ leftValue +',0,0)', 
            '-webkit-transition-duration':'150ms',
            '-webkit-transition-timing-function':'linear'
        }).bind("webkitTransitionEnd", function(ev){
        リンククリックイベントのバインド
        遷移元画面のremove            
            }
        });

Answer 1

jQuery、cssともにカクつくようだとwebviewの限界なのではないかと、やっぱりネイティブのようにはいきませんよね。
画像が少ないとスムーズなのであれば、新Divの方は画像をhiddenにしておいてスライド後に表示されるとかどうでしょう？

Comments

[manz]

hiddenにしてもダメでしたがそもそも大きい画像をhtmlから除去するとかくつかなくなりました。
アドバイスありがとうございます。

[rossi46hiro]

すみません、Lazy Loadみたいなものを考えてました。
ライブラリそのままでは使えないですが、同じようなものをスライドで実装すれば、コンテンツがなにもない状態でスライドできるのでスムーズになるかと！

Answer 2

jQuery.fx.interval=100;

に設定してから実行するとどうなりますか？
この値はアニメーションなどの、描画毎の間の時間(ミリ秒)になります。

Comments

[manz]

ご回答ありがとうございます。
1～100に間でいろいろ試してみましたが、あまり変わりませんでした。
（200にした場合は想定通りよりかくつきました。）
右から左へスライドするとき、一周スライドが止まってそのあとはスムーズに左へスライドする動きになっています。

画面を戻り、再度同じページに遷移しようとするとスムーズにスライドされるので、キャッシュ関連の問題でしょうか。。。

[sekitaka_1214]

あ、新DIVの画像も予めロードしておくのでなく、新DIVに遷移するタイミングでロードしているということでしょうか。
そうであれば、初回の画像のロードのために、一瞬カクつくのは自然な動きな気がします。

ローカルですし、ページ表示時に新DIVも含めて全ての画像をロードしておくのはどうでしょうか。

[manz]

とある理由で、何百枚もページがありまして遷移のたびに遷移先の画像を読み込む作りになっています。
横スクロールできる表のページなのですが、メインのページ画像と横に長い画像が配置してあり、横に長い画像を短く編集して表示させてみるとかくつくことがなくなりました。
原因の切り分けはできたので、少し前進したかと思います。
見えている範囲の画像のみ先に読み込んで、遷移が終わったら差し替える等いろいろ試してみます。
アドバイスありがとうございました。