表示待ち時間に「処理中...」のメッセージを表示させたいのですが

質問

表示に5秒くらいかかるページを作っています。表示されるまで、「処理中...」のメッセージを表示させたいと思っています。Googleで検索したところ、
http://himajin.moo.jp/java/speed/loading.html
というページを見つけまして、下記のように若干変更して書いてみました。
----
<script language="JavaScript"><!--
function loading(){
document.getElementById("nowload").style.display= "none";
}
onload=loading;
// --></script>
<noscript>表示するにはscriptを有効にしてください。</noscript>
<div id="nowload"style="position:absolute;text-align:center;font-size:40px;width:100%">
<b>処理中....</b>
</div>
<div id="contents">
<?PHP
ここに5秒くらいかかるPHP処理
?>
</div>
----
しかし、実行してみると5秒くらい画面に何も表示されず、その後処理し終わった画面が表示されるような挙動です。よく見てみると最終の画面が表示される直前の一瞬「処理中...」の文字が出ているようです。

つまり、「処理中...」の文字をまずはすばやく出して欲しいのに、最終の画面表示とほぼ同時に出力されるような挙動をしています。

まずは「処理中...」の文字を出すにはどうすればいいのでしょうか？ご存知の方、ご教授ください。

回答No.4

leap_day

こんにちは

PHPはあまり扱っていないので参考程度にしかならないかもしれないですけど・・・

<?php ～ ?>の部分を外部ファイルにしてiframeとかで読み込むというのではダメですか？

扱ってないので時間のかかる処理が思いつかなかったのでとりあえず表を書いてsleep(5)で5秒ほど止めてみたのですがそのままやったときは読み込み中フリーズしたような感じでしたがPHP処理を外部ファイルでiframeに読み込んでやるとうまくいきました

多分なのであってるかどうかは分かりませんが</body>まで読み込んでページが表示されるので参考サイトの場合は読み込んで外部ファイルであるimgファイルを表示する時間だけNow Loadingを表示してるのではないでしょうか？
ですので</body>に行き着くまでに5秒の処理時間が必要になる今回の場合、その間空白のページが表示され、ページの表示直前に一瞬だけ処理中が表示されてるのだと思います

なので上記の場合もiframe内の表示はされていないけどページ(now Loading)は表示され、iframeの表示がすべて終わったらfunction loading()が行われるのだと思う

あくまでも推測ですので定かではないですけど（＞＜）
一応書いておきますけどPHP5です

回答No.3

yambejp

>の部分が先に吐き出さないのですよ

といわれても、サーバー側は吐き出しているとおもいますよ。
出力がとまっている５秒の間にブラウザのストップボタンを
おしてソースを確認してみるとか・・・

あとはPHPのバージョンによっては多少挙動が違うのかも。
わたしの環境は4.4.4ですね

補足

ありがとうございます。
そうですね。ストップボタンを押して確認してみます。確認しても対処方法はわかりませんが・・・(x_x;;)
PHPは5を使っています。PHPのバージョンの違いもあるかもですね。

回答No.2

yambejp

phpのバッファリングを重い処理のまえにはきだしてやるだけです。

<script language="JavaScript"><!--
function loading(){
document.getElementById("nowload").style.display= "none";
}
onload=loading;
// --></script>
<noscript>表示するにはscriptを有効にしてください。</noscript>
<div id="nowload"style="position:absolute;text-align:center;font-size:40px;width:100%">
<b>処理中....</b>
</div>
<div id="contents">
<?PHP
flush();
sleep(5);
?>
</div>

補足

ありがとうございます。
そうですよね。そう考えていた（サンプルでも）のですが、
<div id="nowload"style="position:absolute;text-align:center;font-size:40px;width:100%">
<b>処理中....</b>
</div>
の部分が先に吐き出さないのですよ。挙動としては
<div id="contents">
<?PHP
flush();
sleep(5);
?>
</div>
の表示といっしょか直前に吐き出されるような挙動をしています。

私が、勘違いしてミスったプログラムをしているのでしょうか。う～ん？？？

回答No.1

PED02744

PHPと書かれているということは、「時間がかかるのはサーバ側処理」ということですね？
ならば、これではだめです。
この画面を修正するのではなく、「このPHPを含む画面を呼び出している画面」側にJavaScriptを入れる必要があります。
<script>
function submit_func(){
// 処理中メッセージを表示する
// 5秒以上かかる処理をsubmitする
}
</script>

<form action="5秒以上かかる処理を含むphp">
<input type="button" name="OK" onClick="submit_func();">

</form>

補足

回答ありがとうございます。早速行ってみました。

動きとしては、
「読み出している画面」にて読み出しボタンを押す。
　　　↓
「処理中...」のメッセージ表示
　　　↓
画面の表示が消える
　　　↓
５秒間時間経過
　　　↓
読み出されている画面表示

となります。微妙に期待していた動きと違います。私が認識違いをしているのでしょうか。
もし、ご存知であればご教授ください。