Web開発FAQ

ステータスバーのプログレス表示がおかしい?

ステータスバーのプログレス表示がおかしいのですが、対処方法はありますか?

フォームの「Submit」アイコンや「HOMEに戻る」ボタンなどを押したとき、ブラウザのステータス・バーに
プログレス表示が一瞬表われて消えてしまうものの、数秒すると期待通りの画面が表示される、
という現象が発生した場合、そしてその現象を利用者があなたに指摘したとしても決して
慌てないでください。

まず、その「Submit」アイコンや「HOMEに戻る」ボタンに、JavaScriptによる画像切替が使用されて
いるかどうかを確認しましょう。
画像切替というのは、マウスカーソルが画像部分にさしかかったり、あるいはマウスボタンを押す・離す
といったイベントに応じて、通常時に表示されている画像を別の画像に一時的に切り換えて表示するもので、見た目のわかりやすさなどから、広く使用されています。

さて「Submit」アイコンや「HOMEに戻る」ボタンは、この画像切替を使用したものだったでしょうか?
そしてそれらをクリックした際、マウスをクリックした位置から動かさない場合はプログレス・バーが
読み込み状況に応じて適切に変化するのに対して、クリック後(次画面表示前)にマウスを
同ボタン上から離すと、ステータス・バーには「ページが表示されました」と表示され、それまで進行中で
あったプログレス・バーが表示されなくなる(プログレス表示のないまま、しばらく後に次画面が表示される状態)でしょうか?

もし上記の通りであれば、ソース記述から少なくとも次の2つのイベントが見つかるはずです。

  • onMouseOut...画像エリアからマウスカーソルが離れますと、デフォルトの画像を読み込みます。
  • onMouseOver...画像エリアにマウスカーソルが重なりますと、指定の別画像を読み込みます。

なお、これらを用いた画像をクリックした際ですが、クリックするためにはマウスカーソルを画像エリアに
重ねることになります。ここで別画像が読み込まれます。
そしてクリックというマウスイベントが発生すると、『home』であればホーム画面に戻り、『Submit』であれば指定のCGIをキックすることになります。
このまま、各ボタン上からカーソルが動かなければ、他に何もイベントは発生しませんから、
ステータスバーに表示されるメッセージおよびプログレスバーの進捗はサーバーとの通信状況に
応じたものが表示されます。
それに対して、クリック後に各ボタン上からカーソルを離しますと、onMouseOutイベントが発生し、
指定の別画像を読み込みます。
そして読み込みが完了すると「ページが表示されました」のメッセージが表示され、プログレスバーも
別画像の読み込みが完了すると同時に非表示となります。
しかし、クリックのイベントはその前に発行されており、CGIへのリクエストも既に完了していることから、
通信自体は継続しており、CGIから送出されたHTMLデータはやがてブラウザに表示されることとなります。

通常であれば画面表示になるまでステータスバーはゆっくりと変遷表示されるはずですが、これは、
イベントが単独で発生してURIをリクエストした後、ページの表示が完了するまで他のイベントが
発生しない場合にのみ当てはまるものであり、onMouseOutが発生した場合はこの通りではありません。

従って「プログレス表示が一瞬表われて消えてしまうものの、数秒すると期待通りの画面が表示される」
という現象は、この場合、正常動作を表わしているのです。