JavaScriptライブラリのキャッシュによるアコーディオンメニュー展開問題とは?

このQ&Aのポイント
  • jQueryやprototypeなどのJavaScriptライブラリを使用して、ホームページにアコーディオンメニューを実装した場合、ページ遷移する際にメニューが展開された状態になってしまうことがあります。
  • JavaScriptの外部ファイルを使用すると、一度閲覧したサイトを再訪した際にキャッシュが残るため、トップページで読み込んだJavaScriptファイルが他のページでもキャッシュされ、再読み込みが行われずに引き継がれる可能性があります。
  • 初めて訪れるページは、同じJavaScriptファイルであっても毎回読み込まれるため、アコーディオンメニューがいちいち展開される状態になることがあります。
回答を見る
  • ベストアンサー

JavaScript(ライブラリ)のキャッシュについて

jQueryやprototypeなどのJavaScriptライブラリを使用して、ホームページに色々な効果をつけています。 その1つで、ナビゲーション箇所に「アコーディオンメニュー」を実装したのですが、ページ遷移する度に読み込みが遅いためか、メニューが全部展開(開いた)状態になってしまいます。 その後3秒~5秒ほどでアコーディオンが閉じた状態になります。 不恰好で困っています。 トップページなど入り口のページはあきらめるとして、他のページに遷移したときは、上記の「メニューが展開する」状態を回避する策はないでしょうか? jquery.js accordion.js というようにサイトのすべてのページに読み込みをしています。 JavaScriptについては「外部ファイルにするとキャッシュが残る」というように聞いたことがありますが、それは一度閲覧したサイトを次回、訪れた際にキャッシュが残っているということでしょうか? それともトップページで一度読み込みをすれば、他のページに遷移したときにトップページで既に読み込みをしたjsファイルがキャッシュされており、引き継がれる(再読み込みをしない)、ということでしょうか? 「アコーディオンがいちいち展開する」ことから、初めて訪れるページは、トップページでもサブページでも、同じjsファイルにもかかわらずいちいち読み込みいくということなのかな・・・と思っているのですが。 JavaScript、JavaScriptライブラリを混同しているような内容で、的はずれな質問をしてしまっているのかもしれませんが、当方、あまり知識を持ち合わせておらず、どうぞご容赦ください。

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

  • ベストアンサー
  • OKbokuzyo
  • ベストアンサー率43% (130/296)
回答No.1

>それは一度閲覧したサイトを次回、訪れた際にキャッシュが残っているということでしょうか? その通りです。 jsファイルも基本的にはキャッシュに残り、次回同じサイトに訪れた場合はサーバから取得はされません。 ※ httpヘッダやブラウザの設定によって異なります。 アコーディオンメニューとは何やらすごそうですね。 私自身は「アコーディオンメニュー」とやらは使ったことないのでよく知りませんが 画面表示時に「アコーディオンがいちいち展開する」というのは 単純にアコーディオンメニューとやらに変換する処理が重いのだと思います。 ※ それにしても3~5秒はちょっとかかりすぎな気がしますが‥。 処理が重いことが原因なのであれば、初期表示ではメニュー部分を(divタグなどで囲って)非表示にしておき、 アコーディオンメニューの処理が終わった時点でメニュー部分を表示すればよい(例えばonloadイベントハンドラの最後にもっていくなど)かと思います。

その他の回答 (1)

  • OKbokuzyo
  • ベストアンサー率43% (130/296)
回答No.2

#1です。 文章を読み直して一部誤解を与えそうな文章を訂正します。 誤)例えばonloadイベントハンドラの最後にもっていくなど 正)例えばonloadイベントハンドラの最後にメニューの表示処理を追加するなど 失礼しました。

関連するQ&A

  • javascriptライブラリの使い方

    aa.js bb.js cc.js の3つのjavascriptを使ったサイトを作成中です。 ヘッダーに <script src="aa.js" type="text/javascript"></script> <script src="bb.js" type="text/javascript"></script> <script src="cc.js" type="text/javascript"></script> と記載し、「aa.js bb.js cc.js 使う前提のスクリプト」をサイト上に記載しているのですが、aa.js bb.js cc.js のそれぞれが重いため、サイト記載のスクリプトがaa.js、bb.js、cc.jsより先に読み込まれてしまい、思ったような表示が出来ません。 (cc.jsが読み込まれないままの状態でサイトのスクリプトを読み終わってしまう) そこで調べてみると、下記のようなライブラリを発見しました。 http://notnil-creative.com/blog/archives/1361 このライブラリ(script.js)を使うと、通常は以下のように書くJavascriptの読み込みが、 <script src="jquery.js"></script> <script src="my-jquery-plugin.js"></script> <script src="my-app-that-uses-plugin.js"></script> 下記のように書くことができるそうです。 $script('jquery.js', function () { $script('my-jquery-plugin.js', function () { $script('my-app-that-uses-plugin.js') }) }) この書き方で、ページのレンダリングを阻害せず、非同期にJavascriptを読み込むことができ、なおかつ「jQueryが読み込まれてからjQueryプラグインを読み込み、そのあとウェブサイト用のスクリプトを読み込む」というような依存関係のある複数のJavascriptファイルの読み込みにも対応できちゃいます。 という優れものであり、私の要求にぴったりと思いました。 早速、http://notnil-creative.com/blog/archives/1361のページからscript.jsをダウンロードしたのですが、使い方がわかりません。 例ではヘッダーに $script('jquery.js', function () { $script('my-jquery-plugin.js', function () { $script('my-app-that-uses-plugin.js') }) }) と記載すればOKと書いてあります。 ただ、この記入方法で動くようにするためには、$scriptがscript.jsに連動していることを記載すべき だと思いますが、javascriptでそのような例を見たことがなく困惑しています。 このスクリプトの使い方(ヘッダーの記入方法)について、ご教授頂けませんでしょうか? 宜しくお願い致します。

  • Javascript外部ファイルの読み込みについて(ブラウザにキャッシュさせたい)

    現在、製作中のサイトにおいて、webページが表示されるまで、5秒~15秒程度かかる事態が発生しています。 該当サイトでは、prototype.js等のjavascriptのライブラリを使用しており、合計で5個のjsファイルを読み込んでいます。 jsファイルの読み込み箇所を削除するとサクサクと快適になるので、jsファイルの読み込みに問題があると考え、jsファイルを圧縮したり(http://dean.edwards.name/packer/等)、ブラウザにキャッシュさせるために<script src=""での読み込み時に引数「?version=1」を追加してみたりしていますが、あまり改善しません。 読み込みの数を減らすため、prototype.jsとjquery.jsを統合するなども試してみました。(統合後のサイズは116KB) 利用環境によってはそれほど気にならない速度なのですが、IE6の環境でかなり重い場合がありますので、改善方法を探しています。 一回目の表示はともかく、2回目以降も毎回トップページ表示に5秒以上かかるのは問題がありますので…。 現時点で原因は、外部jsファイルがキャッシュされず毎回サーバーに読みにいっているために遅くなっていると思うのですが…。 ブラウザに外部ファイルをキャッシュさせる方法は何かないのでしょうか? ちなみに、重くなる環境で、他のサイト(外部JSファイル読み込み多数)のサイトを表示しても、2回目以降は重くなりません。ブラウザのキャッシュの削除も一度試しています。 参考に、現在のスクリプト呼び出し部分を記述します。 ---------------------ソースここから--------------------------- <script type='text/javascript' src='js/prototype-1602-and_jquery.js?version=1'></script> <script type='text/javascript' src='js/js.js?version=1'></script> <script type="text/javascript" src="js/lib/jquery_auto_j.js?version=1"></script> <script type='text/javascript' src='js/scriptaculous-js-181/src/scriptaculous.js?load=effects'></script> <script type='text/javascript' src='js/lightview.js?version=1'></script> ---------------------ソースここまで--------------------------- また、スクリプトはPHPで作っていますので、キャッシュを許可する記述を以下のようにしています。 ---------------------ソースここから--------------------------- session_cache_limiter('private_no_expire'); session_start(); ---------------------ソースここまで--------------------------- また、現状ではjsファイルの読み込みが原因かと考えていますが、それ以外でも改善点などがあれば、それをご指摘頂ければありがたいです。 宜しくお願い致します。 確認環境:windows XP、 IE6 HP作成スクリプト:PHP

  • JavaScriptライブラリってそもそも・・・

    私はweb制作をはじめて3年たらずのwebデザイナーです。 プログラムはまったくと言っていいほど書けないので、アニメーションなどを実装したいときはwebで拾った著作権的に大丈夫なものを使いまわしています。 ほとんどjqueryライブラリを使ったものです。 最近はそのソースも少しは読めるようになり、少し手を加えられるようになりました。 そこで、かなり根本的な疑問がわいてきたのです。 ◆JavaScriptライブラリってそもそもなにが書いてあるものなのでしょうか? ※JavaScriptライブラリとはで調べたのですが、難しい言葉が多くて・・・ (jqueryとは具体的にどんなものが書いてあるものなのか。) ◆jqueryのアドオンとかjqueryのプラグインとか書いてあるのをよく見かけますが、これはなんのでしょうか?アドオンとプラグインは違うものなのでしょうか? ◆jqueryを読み込んで実行するためのスクリプトをソースに追加すれば意図した動きになりますよね。(アコーディオンメニューなど) ↓こういうもの=========== <script type="text/javascript"> $(function(){ // ここにコードを書いていく。 }); </script> これは「jqueryライブラリを使用して作ったプログラム」という言い方であっているのでしょうか? それともこのソースに追加するスクリプトのことをアドオンというのでしょうか? 無知で恥ずかしいのですが、この辺のことをきっちり理解できれば、もう少し自分のできる範囲が広がるのではないかと思い、質問しました。 よろしくお願いします。

  • javascriptの多用によるページエラーの回避について質問致します

    javascriptの多用によるページエラーの回避について質問致します。 私は趣味の傍ら、とあるホームページを運営しているのですが、そのページの中で、ページのトップに戻る時、滑らかにスムースに戻る動きを実現するために、「jquery」の「jquery-1.4.2.min.js」と「jquery.page-scroller-306.js」を使用しています。この時点では、エラーなく動作していたのですが、新たに、サイドメニューの箇所で「アコーディオンのように滑らかに開閉するメニュー」を導入しようと、http://hyper-text.org/archives/2006/12/slide_menu_javascript.shtml のページにある例を参考にして、3つのjsファイル(slidemenu.js)、(prototype.js)、(effects.js)を追加し、なんとか動作確認に成功しましたが、今度はページをトップにスムースに戻る動きができなくなってしまい、左下に「実行しましたが、ページでエラーが発生しました」とエラーが出てしまいます。そのエラーの詳細は「'undefined'は Nullまたはオブジェクトではありません」 「jquery-1.4.2.min.js コード0 」「文字26」というような感じです。つまり片方動作すれば、片方動作せずの状態です。 このエラーを解消する方法はございますでしょうか?アドバイスよろしくお願い致します。

  • javascript 動作がうまくいかない

    javascriptは、ほぼわかりません。 参考url http://histerian.net/pallax/ パララックス サイトを構築しておりました。 メニューを押してスクロール移動すると、上部のmenuがアクティブ状態になります。 しかし、下にスクロールしてからメニューを押して、上に移動すると、menuが2つ、アクティブ状態になってしまいます。 ただ、1px上にずらすだけで低いコンテンツのメニューのアクティブが消え、本来のコンテンツのmenuがアクティブになります。 下へスクロールしてから、メニューを押して上に戻ったときに、該当のmenuのみ、アクティブ状態になるようにしたいです。 使用している元は cool-kitten というサンプルです。 url https://www.jqueryscript.net/demo/jQuery-Responsive-Parallax-Scroll... 使用しているjQueryは以下になります。 jquery.easing.1.3.js jquery.stellar.min.js waypoints.min.js 動作を制御しているjavascriptファイルは以下になります。 scripts.js どなたかご教示していただけないでしょうか よろしくお願い致します

  • jQueryのアコーディオンメニュー デフォルトでの開閉

    jQueryのアコーディオンメニュー デフォルトでの開閉 すでに掲載されている http://okwave.jp/qa/q5978950.html 「jQueryのアコーディオンメニュー 開閉の制御」では 解決できませんでしたので質問です。 アコーディオンメニューにおいて 添付ファイルのように a.htmlを開いたら、1番上のアコーディオンが開いてる状態 b.htmlを開いたら、2番上のアコーディオンが開いてる状態 c.htmlを開いたら、3番上のアコーディオンが開いてる状態 にしたいのですが、 どうもうまくいきません。。。 メニューが2つならできるのですが 3つになるとさっぱりわからなくなります。 特にアコーディオンを使うための.jsにこだわりはないのですが (開閉時にスムーズに動く事ができればどれでも構わないです) これが可能になるjsはどこかにないでしょうか? もしくは、どうすればこれが可能になりますでしょうか? どうぞよろしくお願いいたします。

  • jQueryにて複数ライブラリを動かす

    wordpressにてWEB制作を行っています。 jQueryにてfullpage.jsというフルページスクロールするライブラリを使用しております。 そのセクションの一つをfullpage.jsの機能の一つ横スライドを行っているのですが、 fullpage.jsのオプションには自動再生はありません。 スライド部分のみ自動再生を行いたいので bxslider.jsというライブラリを使用し、 横スライドしたいセクションをbxsliderで動かしたいのですが、 bxsliderが全く作動しません。 また <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.bxslider').bxSlider(); }); </script> の記述を <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#fullpage').fullpage(); }); の上に書くと今度はfullpageが動きません。 jQueryライブラリは同ページで二つ同時には動かないんでしょうか? また、書き方が間違っていますでしょうか? 宜しくお願い致します。

  • JAVAScriptライブラリのリンク先

    先日質問したところ、別件でJQueryなどのライブラリは googleやmicrosoft がホスティングしてるJavaScript を いろんなサイトで読み込んで、ローカルキャッシュが はたらくことを期待するのが主な戦略とお聞きしました。 今回悩んでいるのがcanvasのライブラリです。 •http://explorercanvas.googlecode.com/svn/trunk/silverlight/excanvas.js に対して <script src="http://explorercanvas.googlecode.com/svn/trunk/silverlight/excanvas.js "></script> と書けばいいのでしょうか。 それともURLが変わる可能性があるので危険なのでしょうか。 uupaa-excanvasもあると聞き、調査してみると http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/ の配下にもexcanvas.jsとuupaa-excanvasがあり混乱しています。 何をどう直リンすればいいのか、直リンはやめた方がいいのか等 アドバイスを宜しくお願いします。

  • jquery自体をJavaScriptで読み込む

    以下のようなものを想定して、jquery.js という中身がjqueryでないものから jqueryの実態を読み込みをさせようとしているのですが、うまくいきません。 ・jquery 2以降は、IE8以前をサポートしなくなるので、useragentで  読み込むjqueryを選択したい。 ・現在、CGIスクリプト上で、jqueryの読み込みを判断しているが、できれば  外部JavaScriptで巨大なjqueryの読み込みの判断をさせたい。 ・キャッシュされたとしても、ライブラリであることから、圧縮して70kバイトと  あまりにも巨大である ・(googleapiを利用すると、IE8以前では、プライバシーの警告が出る場合がある) 確かに、スマホにjqueryを普通に読み込ませても、何も問題なく動作しますが、 相当がんばって圧縮をしても70kバイト程度のライブラリを、使用しないのに 読み込むというのも気が引ける部分もあります。 何とか、動的に、かつ、何も問題なく、jqueryをJavaScriptで読み込む方法は あるでしょうか? このようなコードは、document.bodyがnullであるため、はじかれてしまいます。 var script = document.createElement('script'); script.src = 'http://hoge/jquery-1.js'; document.body.appendChild(script); var callee = arguments.callee; var interval = setInterval(function() { if (!document.evaluate) return; clearInterval(interval); interval = null; callee(); }, 100); このコードでも、jqueryを使用するものが、jQueryがないというエラーで、うまくいきません var scrptE = document.createElement("script"); scrptE.setAttribute("type", "text/javascript"); scrptE.setAttribute("language", "JavaScript"); scrptE.setAttribute("src", "http://hoge/jquery-1.js"); document.getElementsByTagName("head")[0].appendChild(scrptE); 以下のようなのは、googleapiのため、使わないものと考えます。 http://phpjavascriptroom.com/?t=ajax&p=jquery よろしくお願いします。

  • JavascriptとJqueryを混在し記述

    JavascriptとJqueryが混在したスクリプトファイル(.js)の書き方について質問です。 Jquery自体がjavascriptで書かれており結局はjavascriptであるということは理解していますが 気になるので質問させてください。 通常、javascriptの書き方として、スクリプトやその関数定義を1つのjsファイルに書くと思いますが、 Jqueryが混在しても考えは一緒で、ただ、ページが全て読み込まれた後(要素を特定できるようにするため)に実行したい場合の スクリプトを $(function(){ //Jquryや通常のjavascript }); の中にこのように書けばいいって話ですよね? つまり1つのjsファイル内に以下のようにスクリプトを混在させた書き方でもいいのですよね? ===== script.js ====== //(1)Javaスクリプト ←jsファイルが読み込まれたら実行するスクリプト //関数定義 function test(){ //Javaスクリプト } //(2)Jquery ←ページが全て読み込まれた後で実行するスクリプト $(function(){ //Jqueryスクリプト //Javaスクリプト }); 初歩的なことかもしれませんがすいません。

専門家に質問してみよう