（注：このブログはもう更新していません）この日記は私的なものであり所属会社の見解とは無関係です。 GitHub: takahashikzn

[クラウド帳票エンジンDocurain]

画面遷移中にアニメーションGIFを動かす

Javascript

Webアプリで、例えばAPサーバ起動直後の最初のアクセスの場合、結構待たされたりするわけです。

なので、レスポンスが帰ってくるまでの間、いわゆる"Now Loading..."画面を出そうとしました。


要するに下の画像みたいな感じ。ぐるぐる回るアニメーションGIFを貼ったのです。


で、HTMLはこんな感じ。フツーですね。

<html>
<head>
  <META HTTP-EQUIV="Refresh" CONTENT="1;URL=r42fw_sample_shop/index/index.action" />
</head>

<body>
  <p>Now Loading ... <img src="./resource/img/loading.gif" /></p>
</body>
</html>

しかし動かしてみると、何とアニメーションGIFが動かずに固まるという。


METAタグだからダメなのかと思い、次のように修正してみたのですが。

<html>
<head>
</head>

<body>
  <p>Now Loading ... <img src="./resource/img/loading.gif" /></p>

  <script type="text/javascript">
    window.setTimeout(function() {
        window.location.href = 'r42fw_sample_shop/index/index.action';
    }, 500);
  </script>
</body>
</html>


でも、これもダメ。


ちなみにIFRAMEもダメでした。

外法を使う

で、最終的には外法のAJAXを使って次のようにしました。
遷移先ページが使用可能になるまで待って遷移するという。

<body>
  <p>Now Loading ... <img src="./resource/img/loading.gif" /></p>

  <script type="text/javascript">
    var url = "foo/bar.action";
    var ajax = new Ajax();
    var thisWindow = window;

    // レスポンスが帰ってきたら実行されるコールバック
    ajax.setResponseHandler(function(ajaxRequest) {
        // サーバが応答可能になったら遷移する
        thisWindow.location.href = url;
    });

    ajax.sendRequest(url);
  </script>
</body>
</html>


何が外法かというと、同じページを2回ロードしているからです(-_-)


ログイン画面のように、基本的に一度しかアクセスしないページとかだったら、
まあ、これでもいいのかな、と…


ぶっちゃけメンドクサイだけなんですが(笑)