質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.91%

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

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,279

score 18

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

![イメージ説明](c34527867b2984af16a5aa84e61c14df.png)

複数画像のページもあるので、下記のソースのようにすべての画像の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            
            }
        });
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/16 22:11

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

    キャンセル

  • 2015/12/16 22:41

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

    キャンセル

+1

jQuery.fx.interval=100;


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/16 20:09

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

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

    キャンセル

  • 2015/12/16 20:20

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

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

    キャンセル

  • 2015/12/16 22:16

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る