![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
ページを読み込み開始してから読み込み終了までの間に「処理中」と画面に表示したいと思い、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">
<!--
window.onload=function(){
document.getElementById("loading").style.display="none";
}
// -->
</script>
</head>
<body>
<div id="loading">ロード中</div>
<?php
// 本当はここでphpを用い、大量のデータベースアクセスを行っていて、処理に時間がかかっています。
flush();
sleep(2);
?>
本文です<br />
</body>
</html>
ただし、上記をブラウザで閲覧した所、最初に砂時計アイコンが表示され、その後しばらくして「本文です」と表示されましたが、「ロード中」という表示はされませんでした。
これをページ読み込み時に「ロード中」とブラウザ上に表示させ、しばらくたった後、「ロード中」を消した上で「本文です」と表示させたいと思ったのですが、どのように書けば良いか分からなかった為、アドバイスいただける方がいらっしゃいましたら、ご教示の程よろしくお願いします。
以上、宜しくお願いします。
No.1ベストアンサー
- 回答日時:
きっちりやるならやはり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!
ご回答ありがとうございます。
ご教示いただいたソースで意図した動作となりました。
このたびはどうもありがとうございました。
以上、よろしくお願いします。
No.2
- 回答日時:
確認したところSafariがダメ、その他メジャーなブラウザはOKでしたので、バッファリングの問題かと。
サーバ側で出力したからといってすぐに表示されるわけではなく、Apacheやブラウザはある程度のデータ量をまとめて送信/表示します。このためデータ量が少ない場合、意図したとおりに表示されないことがあります。
試しに div「ロード中」の前に十分な文字列を加えてみて下さい。
(ちなみにSafariでは 350byteほど 足してやると動作しました)
蛇足ながら、確かブラウザにより、きちんと table タグが閉じられるまではテーブル内のコンテンツは一切表示されないということもありましたので、table内に配置している場合は要注意です。
ご回答ありがとうございます。
ご指摘のように十分な文字を追加した所、意図した動作となりました。
このたびはどうもありがとうございました。
以上、よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- PHP PHPのエラーの解消法について教えて下さい。 1 2023/02/06 10:48
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryでシンセサイザーを作っ...
-
switch文のswitch(n)の部分を複...
-
セレクトボックスを2つ選択して...
-
①入力フォーム→②確認表示画面→③...
-
追加ボタンを押した際に ok ボ...
-
二次元配列の全要素の全要素を...
-
【GAS】WEBアプリでハイパーリ...
-
【Google Apps Script】「ライ...
-
プログラミング 学習
-
HTMLでサブフレームから親のス...
-
ジャバスクリプトについて。
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
二次元配列を使って順位をだす...
-
iOSのみダブルタップが必要
-
jsで質問です。 displayプロパ...
-
var exports = exports || {}; ...
-
HTMLタグに複数のクラスを設定...
-
Googleフォームで選択肢に応じ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
[jQuery UI] sortableを使いaja...
-
.txtファイルの読み込み
-
変数にドットをいれることはか...
-
読み込み開始から読み込み終了...
-
JavaScriptでリンク先コンテン...
-
jQueryでloadしたphpをapendTo...
-
ajaxでPOSTする変数の変数名を...
-
javascriptでAPIをcallしたい
-
$.ajax({ って何ですか?
-
配列に格納したXHRのreadyState...
-
ドラッグ & ドロップでのド...
-
JavascriptからPHPへのAjax通信...
-
階層別の組織図の自動作成について
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
-
JavaScriptでtabindexの変更っ...
-
カンマ区切りのデータを配列に...
-
readyStateが4にならない原因
-
SQLのmaxで求めた値を変数に代...
-
AjaxでJSONを受信すると、文字...
おすすめ情報