• 締切済み

JavaScript?でローディングイメージの表示

以下のサイトのように http://www.sekaimon.com/ キーワードを入れて検索すると、結果が表示されるまで「Now Loading」的なイメージが表示されるのですが、これはどのように行っているのでしょうか? 恐らくJavaScriptかAJAXだと思うのですが、検索してもなかなか見つかりません。 どなたかご存知の方がいたら参考サイトなどお願いいたします。

みんなの回答

  • oka5130
  • ベストアンサー率66% (35/53)
回答No.2

ざっくり説明しますと、「Now Loading」的なdiv要素をあらかじめ作っておき、 スタイルに position: absolute; と display: hidden; を指定しておきます。 そして、ボタンクリック時やフォームが submit された時に display を block にすればOKです。 この際、div要素を画面中央に配置(left と top を指定)するなどの処理が必要になります。 中央は、document.body.clientWidth や div要素の width、document.body.scrollLeftなどを使って計算します。

masasugi19
質問者

お礼

具体的な説明ありがとうございます。 ちょっと難しそうですが試しにやってみます。

全文を見る
すると、全ての回答が全文表示されます。
  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

ajaxって 投げた要求の結果が返ってきたら反応するように書いてあるんだけど 投げた後にローディング表示して結果が返ってきたら書き換えてるだけじゃない?

masasugi19
質問者

補足

その一連の動きがどうなっているのか分からなかったので、参考になるサイトなどを探していました。 最近ちょくちょく見かける機能ではあったので、何かしらのサンプルはあると思うのですが、なにしろこの機能のネーミングが分からないので、 「JavaScpirt ローディング」などで検索していました。 何かもっとヒットしそうなキーワードってありますでしょうか?

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

関連するQ&A

  • 項目のリストをJavaScriptで実現したいのですが・・・

    こんにちは。utusemiと申します。 テキストボックスにフォーカスしたら、リストを表示して値を選択出来るプログラムを考えていますが、これをJavaScriptで簡単に実現できますでしょうか? 以下のサイトに私のイメージに近いものがありました。 http://www.futomi.com/books/ajax/source/04/textbox2.html ※コレはAjaxで作られているようです。 上記では、頭文字を入れるとそれに準じた値がでますが、そのように可変でなくて良いのですが、参考になるサイト等ご存知でしたらご教授いただけると助かります。 よろしくお願いします。

  • javascriptを使って

    javascriptを使って 2つのプルダウンメーニューでキーワードを選択し そのキーワードを使って楽天の検索エンジンでand検索(絞り込み検索)する方法を教えてください。 フローのイメージです。 1、プルダウンメニュー1から、60mm を選択 2、プルダウンメニュー2から、200mm を選択 3、商品を探すボタンを押す 4、楽天に出店している AAAショップ and BBB商品 and 60mm and 200mm での検索結果が現れる。 (4つの絞り込み検索だが、プルダウンで選ぶのは後半のん2つの項目) 初心者で、javascriptのことはよくわからないのですが よろしくお願いいたします。

  • JavaScriptでundefinedが表示され

    テーブルのTDタグで囲まれているテキストエリアに対し以下のjsを使いました。 Dynamic Drive DHTML scripts- Recall Form Values script http://www.dynamicdrive.com/dynamicindex16/formremember.htm JavaScript + Ajax 実践サンプル集 - 入力したデータを記憶する http://jsajax.com/Articles/RecallTextValues/690 入力した項目を再表示させる処理です。 1行目まではうまく動くのですが 二行目のテキストエリアにundefinedが表示されてしまいました。 何も入っていないから当然なのですが回避するすべはないでしょうか。

  • JavaScriptからPHPに配列を渡すやり方

    JavaScriptからPHPに配列を渡すやり方を教えてください。 やりたい事は、A.HTMLのJavaScriptで動的に作成された配列をB.PHPにPOSTで渡して、B.PHPに遷移したいと思っています。Ajax、JSONなどのキーワードで検索するとそれらしい回答はあるのですが、B.PHPに遷移したいので、Ajaxでもないような気がして、やりたい事にマッチする回答がありませんでした。配列列をHiddenで渡すしかないのでしょうか。もう少しスマートのやり方がないでしょうか。 よろしくお願いします。

  • 複数の検索エンジンの結果を一つのページに表示するようなサイトを作りたい

    複数の検索エンジンの結果を一つのページに表示するようなサイトを作りたいのですが、どうすればよいでしょうか? 何かそれに関する情報というか、そんなのが掲載されているサイト等、ご存知の方がもしいれば教えてください。 例えば、フォームからキーワード検索ボタンを押したら、そのページに、yahooとgoogleの検索結果が表示されるような、イメージです。

    • ベストアンサー
    • PHP
  • javascriptで複数キーワード検索したい。

    XMLでデータベースを作り、Javascriptで検索、HTMLで表示させていますが、一単語しか受け付けません(compareStringで検索させているためだと思います)。 yahooやgoogleのように複数単語を受け付けるようにしたいです。 複数キーワードをスペース区切りなどで入れ、AND検索できるようにするにはどうしたらいいでしょうか。 参考サイトや助言などご教授いただきたく、よろしくお願いいたします。

  • javascriptによる文字検索

    文字検索に http://winofsql.jp/VA003334/JScriptSAMPLE011022204502.htm のサイトを参考に使用していますが、検索結果の文字の背景にカラー(例えば黄色の背景)で表示させたりすることはできるのでようか? いろいろとサイトを調べましたが、検索キーワードが悪いのか見つかりません。 知っている方いらっしゃいましたら教えて下さい。

  • JavaScriptで擬似フレーム、読み込み完了を知るには?

    サイト内の各ページ上部に、Ajaxで共通のメニュー部分.htmlを読み出し、表示しています。 参考:AjaxでIFRAME的な表示をやってみる http://bizcaz.com/archives/2006/11/13-000253.php 参考:階層メニューにJavaScriptで書き換え http://www.dhtmlgoodies.com/index.html?whichScript=dhtmlgoodies_menu2 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="ajaxcontents.js"></script> <script type="text/javascript" src="ListbasedDHTMLmenu.js"></script> </head> <body> <span id="ajax_content_block"></span> <script type="text/javascript"> <!-- ajax_content_onload_get('メニュー部分.html','','ajax_content_block','ajax_content_progress'); //--> </script> <div> 本文 </div> </body> </html> ajaxcontents.jsでメニュー部分.htmlを読み出しListbasedDHTMLmenu.jsで階層メニューに書き換えています。 "dhtmlgoodies_menuObjはNullまたはオブジェクトではありません" のエラーが出て、階層メニュー部分が表示されません。 dhtmlgoodies_menuObjは階層メニュー書き換えのListbasedDHTMLmenu.jsで使われています。 ページ読み出しjavascript完了後に、ページ書き換えjavascriptを実行すればと思っているのですが、 方法の検討がつきません。 if ( location.search.indexOf("1") == -1 ) { setTimeout("_reload()",100); } function _reload() { location.href = location.href + "?1"; } ↑でリロードさせて見たのですが、バックすると表示されなくなります。 すいませんがアドバイスをお願いいたします。

  • Javascriptとcookieが表示されない

    はじめまして。 windowsXPでInternet Explorer6を使用していて 先日まで普通に表示されていたHPのJavascript部分が表示されなくなりました。 それでいろいろ検索してみて こちらのサイトにあるような方法をとってみました。 http://celsiorup.com/script/jc_check.htm IEの設定で ツール→インターネットオプションで いろいろサイトなどで紹介する方法を有効にしても表示されません。 それで上記のサイトにあるcookieの表示もされないので いろいろ設定したのですがこちらも表示されません。 IEだけではなく他のブラウザなら大丈夫なのかな?と思い Slepnirなどのブラウザも使用してみたのですが こちらでも表示されません。 こうなってしまった場合に 戻す方法ってご存知の方いらっしゃいませんか? お手数お掛けしますが 知ってられる方いらっしゃったらよろしくお願いします。

  • 読み込み中に「Now Loading」を表示したい

    カテゴリが異なると思い、改めて質問致します。 PHPファイルの読み込み中に「Now Loading」を表示したいのですが、 (関連ページ http://oshiete1.goo.ne.jp/qa2753468.html) PHPファイルで作成されている色々なサイトを見てみましたが、表示されるまで「Now Loading」を表示しているページってないんですよね。(1ページぐらいあってもよさそうなものですが)ということは、PHPファイルの読み込み中に「Now Loading」を表示する事はやはり不可能なのでしょうか? どうかアドバイスの程よろしくお願い致します。

    • 締切済み
    • PHP