LoginSignup
8

More than 5 years have passed since last update.

OnsenUIで画面遷移時にカクつくのを減らしたい

Last updated at Posted at 2016-04-06

記事の対象者

  • OnsenUIを使っている人
  • 画面遷移時に$httpとかでロードさせている人

問題

nav.pushPage()で画面遷移させるとアニメーションが発生するが、次の画面でHTTP読み込み処理とかが入っていると画面がカクつく。Android端末では顕著だ。

解決策

アニメーション終了後に読み込み処理を実行する。

方法

遷移後の画面のJS内のons.readyにpostpushイベントを拾う処理を追加する。

// ページ読み込み時
ons.ready(function() {
    $timeout(function() {
        // アニメーションが終わってから
        nav.once('postpush', function() {
            // 読み込む
            loadSomething();
        });
    });
});

当たり前すぎて他に書くことがない。困った。

結論

postpushイベント重要。
$http自体は非同期で動くので、本来は必要ないかもしれない。

使用したのはOnsenUI 2 Beta.8だが、iPhoneで動かすと特に工夫しなくてもサクサク動く。
流石にここら辺はWebViewの性能だったり、OnsenUI 2自体のチューニングの問題だったりするのだろう。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8