「Onsen UI最小限のテンプレート」を元に、2ページ間を前後に行き来するアプリを作りました。

それぞれのページに異なる画像を1枚ずつ貼り付けていて、page1.htmlのons-buttonのクリックでpage2.htmlに遷移した際に画像を50%に縮小して表示させたいのですが、私が書いたコードでは一旦100%サイズで表示してから一瞬遅れて50%で再描画されます。

pushPage後、いきなり50%で表示させるにはどうすればいいでしょうか？

追記：

page2.htmlのimgタグでheight="100%"を指定しているのには何か理由があるのですか？

コメント返信にはポイントが足らないのでこちらに書き足します。
100%は見て解りやすいように便宜的に設定しています。実際のアプリでは縮小の他にも位置調整などの表示前処理をしたいと思っています。

[index.html]

    <script>
        ons.bootstrap();
        ons.ready(function() {

            /* 次ページに遷移する直前 */
            myNavigator.on('prepush', function(e) {
            });
            /* 次ページに遷移した直後 */
            myNavigator.on('postpush', function(e) {
                resize();
            });
        });

        /* 画像をリサイズ */
        function resize(){
            $('.page_image').css({
                'height': '50%',
            });
        }

    </script>
</head>
<body>
    <ons-navigator var="myNavigator" page="page1.html"></ons-navigator>

[page1.html]

<ons-page>
<div class="page" style="text-align:right" >
    <ons-button onclick="myNavigator.pushPage('page2.html')">次ページに進む</ons-button>
</div>
<img class="page_image" src="image1.jpg" height="100%" />

[page2.html]

<ons-page>
<div class="page" style="text-align:right" >
    <ons-button onclick="myNavigator.popPage()">前のページに戻る</ons-button>
</div>
<img class="page_image" src="image2.jpg" height="100%" />