画面遷移中の集計中イメージ(モーション?)表示について


Webサイトで、ある画面から次の画面に遷移する際、DBの計算が多いため、時間がかかってしまいます。

この待っている間に離脱してしまう人を少しでも減らしたく、
次の画面に行くまでに、『読み込み中... or 集計中..』をイメージさせる動き
(ぐるぐる回ったりするもの、とメッセージ)を手前に表示させたいのですが、

どのような方法があるでしょうか。javascriptを使う/Ajaxを使うなどもいいのですが、
画面遷移は必要です。できましたらサンプルコードもお願いいたします。

(環境はPHP, MySQL、後、Ajaxはよくわかってなくて書いてます)

よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 登録:2009/03/09 16:17:51
  • 終了:2009/03/16 16:20:03

回答(2件)

id:pahoo No.1

pahoo回答回数5960ベストアンサー獲得回数6332009/03/09 18:27:30

ポイント60pt

http通信の画面遷移中――すなわち、同期通信中に、ご質問のような待機メッセージを出すことは、原理的にできません。

非同期通信である Ajax を利用して待機メッセージを表示し、サーバ処理が終わったら画面遷移させるような流れにするのが無難です。


Ajax で待機メッセージを表示させるやり方は、「Ajaxで受信中のインジケータを表示する」が参考になるでしょう。

コールバック関数 on_loaded1 でインジケータが停止されたタイミングで、遷移先ページにジャンプすればいいでしょう。

id:khazad-Lefty No.2

khazad-Lefty回答回数181ベストアンサー獲得回数272009/03/10 12:51:21

ポイント10pt

ページ遷移したらページごと待ち受け表示が消えるわけで、

単純にSubmit時に待ち受け画像を表示するようなjabascriptを埋め込むという方法はあるかもしれません。

かなりベタな方法としてこんな感じ。

<html > 
<head> 
<title>TEST</title> 
</head> 
<body> 
        <form id="testform" action="(POST先)" method="post" onsubmit="document.forms(0).wait.style.display='';"> 
        <input  type="text"  /> 
        <input  type="submit" value="POST" /> 
        <img id="wait"  src="(待ち受け画像)" style="display:none;" /> 
        </form> 

</body> 
</html> 

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません