読み込み開始から読み込み終了まで処理中表示する方法

解決済

質問者：iroha_168
質問日時：2011/07/03 16:52
回答数：2件

ページを読み込み開始してから読み込み終了までの間に「処理中」と画面に表示したいと思い、http://oshiete.goo.ne.jp/qa/2753468.htmlを参考に下記のソースを書かさせていただいました。

【ソース】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>title</title>
<script type="text/javascript">

</script>
</head>
<body>
<div id="loading">ロード中</div>
<?php
// 本当はここでphpを用い、大量のデータベースアクセスを行っていて、処理に時間がかかっています。
flush();
sleep(2);
?>
本文です<br />
</body>
</html>

ただし、上記をブラウザで閲覧した所、最初に砂時計アイコンが表示され、その後しばらくして「本文です」と表示されましたが、「ロード中」という表示はされませんでした。

これをページ読み込み時に「ロード中」とブラウザ上に表示させ、しばらくたった後、「ロード中」を消した上で「本文です」と表示させたいと思ったのですが、どのように書けば良いか分からなかった為、アドバイスいただける方がいらっしゃいましたら、ご教示の程よろしくお願いします。

以上、宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.2

回答者： JaneDue
回答日時：2011/07/04 11:46

確認したところSafariがダメ、その他メジャーなブラウザはOKでしたので、バッファリングの問題かと。

サーバ側で出力したからといってすぐに表示されるわけではなく、Apacheやブラウザはある程度のデータ量をまとめて送信/表示します。このためデータ量が少ない場合、意図したとおりに表示されないことがあります。

試しに div「ロード中」の前に十分な文字列を加えてみて下さい。
(ちなみにSafariでは 350byteほど足してやると動作しました)

蛇足ながら、確かブラウザにより、きちんと table タグが閉じられるまではテーブル内のコンテンツは一切表示されないということもありましたので、table内に配置している場合は要注意です。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
ご指摘のように十分な文字を追加した所、意図した動作となりました。

このたびはどうもありがとうございました。
以上、よろしくお願いします。

通報する

お礼日時：2011/07/11 00:10

No.1ベストアンサー

回答者： yambejp
回答日時：2011/07/04 09:36

きっちりやるならやはりajaxで処理する方がよいでしょう

viewdata.php
<script>
function createXMLHttpRequest(){
if( window.XMLHttpRequest ){
return new XMLHttpRequest();
}else if( window.ActiveXObject ){
try{
return new ActiveXObject( "Msxml2.XMLHTTP" );
}catch(e){
return new ActiveXObject( "Microsoft.XMLHTTP" );
}
}
return null;
}
function getData( serverURL, objID ){
var ajax = createXMLHttpRequest();
ajax.open( "GET", serverURL );
ajax.onreadystatechange=function(){
if(( ajax.readyState == 4 ) && ( ajax.status == 200 )){
if(objID!=""){
var obj = document.getElementById( objID );
obj.innerHTML = ajax.responseText;
}
}
}
ajax.send( '' );
}
window.onload=function(){
document.getElementById("hoge").innerHTML="loading ..."
getData("loaddata.php","hoge");
}
</script>
<div id="hoge"></div>

//loaddata.php
<?
sleep(3);
?>
success!