ベストアンサー

ホームページ、データを読み込むまでの時間…

2013/06/25 13:17

HPであるデーターを画面表示させています。しかし読み込みまで少し時間がかかるため、そのあいだ砂時計などの画像を、表示させたいのですが、どのようにすれば実現できるでしょうか？もしくは「少しお待ち下さい」のような文章を、ロード時間のみに表示させる方法でも構いません。

utilityahd
お礼率55% (512/921)

JavaScript
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

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

ベストアンサー

LancerVII
ベストアンサー率51% (1060/2054)

2013/06/26 08:46 回答No.1

こんにちは。データの表示部分を切り離せるのであればAjaxを利用すると比較的簡単に実現できると思います。例えば下のサンプルですと画面表示時にはデータの表示は行っていません。まず表示用の画面がロード後に「Now Loading...」の文字を点滅させます。その後$('#list').load ( 'load.php' );によってデータの表示を実行しています。 load.phpでの処理が終わってデータが帰ってきたら<div id="list">の中身が変更されますので、必然的にNow Loadingが消え、データの表示がされます。 <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $().ready ( function() { setInterval ( function() { $('#list p').fadeOut ( 300, function() { $(this).fadeIn(300) } ); }, 600 ); $('#list').load ( 'load.php' ); }); </script> <style> #list p { color: #f00; font-weight: bold; } </style> </head> <body> <h1>○○履歴一覧</h1> <hr /> <div id="list"> <p>Now Loading...</p> </div> </body> </html>

ログインすると、全ての回答が全文表示されます。