人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

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

●質問者: HappyOcean
●カテゴリ:ウェブ制作
✍キーワード:Ajax dB JavaScript MySQL PHP
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● pahoo
●60ポイント

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

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


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

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


2 ● khazad-Lefty
●10ポイント

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

単純に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> 
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ