記事の対象者
- 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自体のチューニングの問題だったりするのだろう。