• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：読み込み開始から読み込み終了まで処理中表示する方法）

ページ読み込み中に「ロード中」と表示させる方法

このQ&Aのポイント
  • ページを読み込み開始してから読み込み終了までの間に「ロード中」と表示させる方法についてアドバイスをいただきたいです。
  • http://okwave.jp/qa/q2753468.htmlを参考にしたが、「ロード中」という表示がされなかったため、どのように書けば良いか分かりません。
  • ブラウザ上に「ロード中」と表示させ、しばらくたった後に「ロード中」を消して「本文です」と表示させたいです。
回答 全件
ベストアンサー
きっちりやるならやはりajaxで処理する方がよいでしょう viewd…
確認したところSafariがダメ、その他メジャーなブラウザはOKでした…

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答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!

iroha_168
質問者

お礼

ご回答ありがとうございます。 ご教示いただいたソースで意図した動作となりました。 このたびはどうもありがとうございました。 以上、よろしくお願いします。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • JaneDue
  • ベストアンサー率75% (263/350)
回答No.2

確認したところSafariがダメ、その他メジャーなブラウザはOKでしたので、バッファリングの問題かと。 サーバ側で出力したからといってすぐに表示されるわけではなく、Apacheやブラウザはある程度のデータ量をまとめて送信/表示します。このためデータ量が少ない場合、意図したとおりに表示されないことがあります。 試しに div「ロード中」の前に十分な文字列を加えてみて下さい。 (ちなみにSafariでは 350byteほど 足してやると動作しました) 蛇足ながら、確かブラウザにより、きちんと table タグが閉じられるまではテーブル内のコンテンツは一切表示されないということもありましたので、table内に配置している場合は要注意です。

iroha_168
質問者

お礼

ご回答ありがとうございます。 ご指摘のように十分な文字を追加した所、意図した動作となりました。 このたびはどうもありがとうございました。 以上、よろしくお願いします。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • SafariでPHPソースがそのまま表示される

    Safariでindex.phpを開くとソースコードがそのまま表示されてしまいます。 拡張子をphpとしているだけでソース内にはphpスクリプトは記述しておりません。 なぜでしょうか？ ※ファイル名をindex.htmlに変えると正しく表示されます。 Windows 7 Home Premium 64bit Safari5.1.5 ソースコードのエンコーディング：utf-8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>テストtitle> </head> <body> <h1>テストページ</h1> </body> </html>

  • XHTML　meta属性　文字化け

    XHTMLを勉強しています。 以下のように記述して表示すると タイトルの部分が文字化けします。 何故でしょうか <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ホームページの作り方</title> <meta name="description" content="初心者のためのホームページテスト" /> <meta name="keywords" content="ホームページ,作成,初心者" /> </head> <body> テスト </body> </html>

    • ベストアンサー
    • HTML
  • 下記のタグの中で必要ないのはありますか？

    (1)　<?xml version="1.0" encoding="UTF-8"?> (2)　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (3)　<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> (4)　<head> (5)　<title>●●●●●●●●</title> (6)　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> (7)　<meta http-equiv="Content-Style-Type" content="text/css" /> (8)　<meta name="robots" content="INDEX,FOLLOW"> (9)　<meta name="description" content="●●●●●●●●"> (10)　<meta name="keywords" content="●●●●●●●●"> (11)　<meta name="content="●●●●●●●●" /> (12)　<meta http-equiv="Content-Script-Type" content="text/javascript"> (13)　<meta http-equiv="Content-Style-Type" content="text/css"> (14)　<link href="css/A1.css" rel="stylesheet" type="text/css" /> (15)　<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

  • cssがIE6で適用されない理由は

    教則本を見てcss/xhtmlでサイトを作ったのですが、 （教則本がIE7以降対応だった為） safari firefoxd IE7では表示がうまくいくのですが、 IE6では全くcssが適用されないです。 少し調べたところこの辺の記述に問題があるのかなと思っています。 誰か教えて下さい。 ............................................................................... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jap" lang="jap" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> ....................................................................

    • ベストアンサー
    • HTML
  • inputの中身を書き換える方法について

    下記で書き換え実行ボタンを押下すると、初期値1は変更後1に変わるのですが、初期値２と初期値３が変わりませんでした。 そのため、inputの中を書き換えるには、divの場合とは違う書き方をしないといけないのかと思ったのですが、どのように記述すればよいかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="JavaScript" type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function(){ $("#change").click(function(){ $("#text1").html("変更後１"); $("#text2").html("変更後２"); $("#text3").html("変更後３"); }); }); // --> </script> <title>title</title> </head> <body> <form> <input id="change" type="button" value="書き換え実行" /> </form> <br /> <div id="text1">初期値１</div> <input type="text" name="text2" id="text2" value="初期値２" /> <input type="hidden" name="text3" id="text3" value="初期値３" /> </body> </html>

    • ベストアンサー
    • AJAX
  • ＰＨＰ、どうして認識しないのですか？

    現在の私のサイト（shtml）のソースは次のとおりです（甲）。これを下記（乙）のように書き換えてアップしましたが”こんにちは”の文字が現れません。 レンタルサーバーの問題ですか？ソースの問題ですか？ （甲） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > <META http-equiv="Content-Script-Type" content="text/javascript"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META NAME="ROBOTS" CONTENT="INDEX,FOLLOW"> <TITLE>○○○</TITLE> （乙） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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" /> <title>○○○</title> </head> <body> <!--shtmlのソースの中に次を挿入しました--> <p> <?php echo "こんにちは。<br />"; echo "こんにちは。<br />"; echo "こんにちは。<br />"; echo "こんにちは。<br />"; ?> </p> ----------------------- これが表示されません。 教えて下さい。どうしてですか？ 宜しくお願いします。

    • ベストアンサー
    • PHP
  • JavaScriptを使ってWebページにメッセージを表示させる

    html内に<div id="info"></div>と書き、それをjavascriptのプログラムから「こんにちは」というメッセージを表示させるようにしたいのですが、何度試しても製作途中の段階でdocument.getElementById(id) has no propertiesというエラーが出てしまいます。（←Firebugでエラーが検出されます） どこが間違っているのか教えていただけると助かります。 ================= HTML ================= <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>map</title> <link rel="stylesheet" type="text/css" href="common/css/main.css" /> <script src="common/js/main.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="info"></div> </body> </html> ================= JavaScript ================= var map window.onload = function() { load(); } function _d(id, htmlTxt) { document.getElementById(id).innerHTML = htmlTxt; } _d("info","こんにちは");

  • crossSlideがうまく機能しないです；

    簡単な画像切り替えのプラグインとして、 crossSlideを見つけたので使用してみようとしたんですが、 全く何も表示されない状態で困っています。 下記のようにソースは記載しています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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-language" content="ja" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <link href="css/index.css" rel="stylesheet" type="text/css"> <script type='text/javascript' src='js/jquery-1.9.1.min.js'></script> <script type='text/javascript' src='js/jquery.cross-slide.js'></script> <script type="text/javascript"> $(function(){ $('#mainvisual').crossSlide({ sleep: 1, fade: 1 },[ { src: 'images/01.jpg' }, { src: 'images/02.jpg' }, { src: 'images/03.jpg' } ]); }); </script> </head> <body> <p>タイトル</p> <div id="mainvisual"> <p>写真</p> </div> </body> </html> cssは何も指定していません。 jsフォルダに、jquery-1.9.1.min.jsファイル、jquery.cross-slide.jsファイルを入れています。 imagesフォルダには、01.jpg、02.jpg、03.jpgを入れてます。 ブラウザには <p>タイトル</p> は表示されるのですが、 div#mainvisualの中の <p>写真</p>の文字は表示されません。 何が原因なのでしょうか。 よければアドバイスの方よろしくお願いします。

  • XHTML のタイトルが表示されません　ご教授おね

    タイトル通りなのですがHTML のタイトルが上手く表示されず、本文の中に入ってしまっています。（cf,添付画像） 　 一番最初の所で躓いてしまいました、解説書の通り何度もやり直したのですが、原因が分からないのです・・・かなり初歩的なこととは思われますがよろしくお願いいたします！ ソースは以下のとおりです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <titile>a</title> <style type="text/css"> </style> </head> <body> </body> </html> ＊ちなみにサンプルでは以下のとおりになっています。（サンプルをインストールすればしっかりと表示されるのです、同じなはずなのに僕が入力しますと上手くいきません） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>a</title> <style type="text/css"> </style> </head> <body> </body> </html>

    • ベストアンサー
    • CSS
  • Xhtmlでの、class="imgover"の記述方法を教えてください。

    ただいま　独学ですが、Xhtmlを勉強しております。 Xhtmlで、カーソルが画像の上に来たら　画像が変わるように設定したいのですが、その方法が　class="imgover"　を使うと出来るとわかりやってみましたが・・・うまくできません。 下記にXhtmlを記述したので、教えてくださいお願いします。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <title>あれこれ</title> <meta name="description" content="あれこれ" /> <meta name="keywords" content="あれこれ" /> <meta name="copyright" content="あれこれ" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <script type="text/javascript" src="js/rollover.js"></script> </head> <body> <img src="img/header_logo.gif" width="312" height="39" alt="日本" class="imgover" /> </body> </html> 画像は、　header_logo.gifと　header_logo_on.gif とが作ってあります。 どこかおかしいのでしょうか?

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する