jQueryの多重読込に関する問題と対策
- a.htmlとb.htmlの両方にjQueryプラグインを使用していますが、b.htmlがa.htmlにloadされた際に正常に動作しない問題が発生しています。
- a.htmlですべてのjQueryプラグインを読み込むことは負荷が高いため、各々のプラグインが必要なときに読み込むようにしたいと考えています。
- しかし、b.htmlが遅延読み込みされないため、実行遅延（DOMの展開待ち）の方法を知りたいです。
- ベストアンサー
jQueryの多重読込
2つのHTMLがあり、両方ともjQueryプラグインを使っています。 今回、a.html側に、jQuery loadで、b.htmlを読込みました。 ■a.html jQuery 本体 jQueryUI jQueryForm jQuery.HashChanged など基本js（多数） ■b.html jQuery.Gallerific jQuery.Fancybox jQuery.fixPing などメディア系統js（多数） ■困っていること 両方とも、$(function(){ ... }) 構文を使って、DOMの展開完了を待っているのですが、「読込まれる側=b,html」の、$(function(){ ... }) がうまく働いていないようなのです。 b.html 単体では何の問題もないのですが、a.htmlにloadされると、遅延読み込みがききません。 元である a.html で全部のjQuery プラグインを読むのは重すぎるため、各々で必要なプラグインを都度、読むようにしたいのですが、その場合、読み込まれる側の実行遅延（DOM展待ち）はどのようにしたらいいでしょうか？
- nayutax1010
- お礼率80% (4/5)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
b.htmlはajaxを用いてスクリプトで読み込んでいるため、ドキュメントレディのようなイベントは発生しません。 タイミングを調整するにはloadのコールバック関数を利用してあげる必要があります。 一方で、もともと別々の文書だったものをまとめてしまうので、仮にスクリプトを実行できても、記述方法によっては問題がでそうな気がします。 ご質問文から推測するに、失礼ながらそちらの方がさらに面倒そうに思えます。 簡単な方法として考えられるのは、ajaxを利用せず、別文書としてiframeなどを利用して表示するようにすれば、問題なく動作すると思いますが？ ＞全部のjQuery プラグインを読むのは重すぎるため ご希望の内容は、結局のところ、そういうことを意味していませんか？ 表示されるまでの待ち時間について「重い」とおっしゃっているのであれば、スクリプトを後から読み込むように制御するとか…
関連するQ&A
- WordPressのプラグインとjQueryのそれ
jQueryの存在を知り、WordPressでスライド画像表示なんかが簡単に実現できることを知りました。さらには、WordPressのプラグインとして直接実装も可能なようですが、両方可能な場合、どちらを選べばよいのでしょうか？ Nivo Slider, ColorBox, FancyBoxを手始めに候補としています。 例えば、jQueryプラグインとして実装したほうが重くならない、などといった違いがあるのでしょうか？比較しつつ教えていただけると助かります。
- ベストアンサー
- ブログ
- jQueryが動きません。
表題のとおりです。 fademover(http://www.detelu.com/fademover/)を動かそうと思って 導入しても動いてくれません。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.fademover.js"></script> <script> $(function(){ $('body').fadeMover({'effectType': 2,'inSpeed': 5000}); }); </script> の部分。 Chromeだと Uncaught TypeError: Object [object Object] has no method 'fadeMover' index.html:14 (anonymous function) index.html:14 n ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 o.fireWith ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 e.extend.ready ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 c.addEventListener.B Safariだと TypeError: 'undefined' is not a function (evaluating '$('body').fadeMover({'effectType': 2,'inSpeed': 5000})') と出ます。 jsやjqueryはあまりいじったことないので 手が出ない状態です。 よろしくお願いします。
- 締切済み
- JavaScript
- jqueryで未定のファイル名を取得する
サイトでjquery.1.4.2を使っています。 javascriptないしjqueryで、/img/test01.jpg～test05.jpg、tesuto.jpgがあり、個数が6個ある（または～～というファイルがある）とアラートを返したいのですが、方法が良く分かりません。 jqueryでloadを使う事も考えましたがファイル名が一定ではないのと個数が毎回変わるため指定ができない状況です。 /index.html /js/jquery.js /img/ファイル なお特定のプラグインを使用する場合、jquery側のバージョン変更は可能です。 よろしくご教授ください。
- ベストアンサー
- JavaScript
- Jquery と JqueryUIについて
現在、Jquery と JqueryUIを使ってプログラムを書いています。上手く動作しないので以下について教えてください。 やりたいことは、ボタンを押すと文字があらわれたり消えたりするという動作を実現したいと思っていますが、今は、ボタンと文字が表示されるのみで、ボタンを押しても全く動きません。 現在書いているコードは以下のとおりです。 ---- <html> <head> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script> $(function() { $('#button').click(function(){ $('#sample-text').show(); }); }); </script> </head> <body> <input type="button" id="button" value="ボタン"> <p id="sample-text">Hello World!</p> </body> </html> ------------------- Jqueryのバージョンは、最初、UIとの互換性を考え、1.3.2を使っていましたが、動かないため、現在は新しいバージョンで試してみたところです。(１．４．４でもだめでした） JSファイルの場所は、上記htmlファイルと同じ階層のjsディレクトリ内です。 また、補足ですが、これが上手くいけば、script内の show メソッドのかわりに ｔoggleを使いたいと考えています。 上記コードで間違っている部分がわかる方がいらっしゃいましたら教えてください。 よろしくお願いいたします。
- ベストアンサー
- AJAX
- jqueryについて質問です。
jqueryについて質問です。 ----------------------------------------------------------- test.js $(window).load(function() { $("body").load("a.php"); $("#btn").click(function() { alert();///動作しない } }); ----------------------------------------------------------- a.html <input type="button" id="btn" name="btn" value="send"> ----------------------------------------------------------- load先のidのクリックを監視するにはどうしたらいいのでしょうか？
- ベストアンサー
- JavaScript
- JQueryでのloadの動作がFirefoxで動かなくて困っています
JQueryでのloadの動作がFirefoxで動かなくて困っています。 サイトのheaderとfooterを外部htmlにして、JQueryのloadで呼び出し指定のdivに出力するようにしたいのですが、IEでは上手くいきましたが、FFでは全く動きません。 $(document).ready(function(){ $("#header").load("../js/header.html #header"); $("#footer").load("../js/footer.html #footer"); });
- 締切済み
- AJAX
- jQueryとprototypeの共存
prototype.jsとjQuery.js、そのプラグインであるjquery.cycle.all.pack.jsを共存させ、データベースから取り出した画像にエフェクトをかけて表示したいと思っています。 ライブラリの共存には'jQuery.noConflict();'を使うところまでは調べたのですが、その使い方がよくわかりません。現在は以下のようにプログラムを書いていますが、jqueryの効果が出ていません。使い方、描き方の間違い等ありましたらご指摘お願いいたします。 <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); function loadHello(){ new Ajax.Request( './php/Search2.php', { onComplete : function( httpObj ){ $('検索結果表示領域').innerHTML = httpObj.responseText; } } );} jQuery(function() { jQuery(".sample").cycle( { fx:'shuffle', delay: -2000 }); }); // --></script> </head> <body onLoad="loadHello()"> <ul id="sample"> <div id="検索結果表示領域"></div> </ul> </body> </html>
- ベストアンサー
- JavaScript
- jqueryを２つ設置した事で片方が動かなくなる
お世話になります かなり困っていますのでわかる方いらっしゃれば宜しくお願い致します 現在サイト内にjqueryを２つ設置しました ・一つは左グローバルメニューに伸縮するタイプのメニュー ・もう一つは画像をクリックするとポップアップの様になるスライドショー 少し自分で調べてみた所<script type=～></script> の書く順序によって片方が効いたり効かなかったりという所まではわかりました しかし、順序を変えても２つが共存する所まで行けません そもそも順序だけでは無いのでしょうか？ 以下を見てわかる方いらっしゃれば 是非お意見頂ければと思います 宜しくお願い致します 以下<head>内タグになります 今の状況だと左伸縮メニューは機能せず ポップアップスライドショーが機能しています <head> <!--左側伸縮メニュー--> <script type="text/javascript" src="./js/mootools-core.js"></script> <script type="text/javascript" src="./js/byslidemenu.js"></script> <script type="text/javascript"> window.onload = function(){ new BySlideMenu('verticalmenu', {vertical: true}); } </script> <!--//左側伸縮メニュー--> <!--ポップアップスライドショー--> <script type="text/javascript" src="./js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="./js/jquery.fancybox-1.2.1.pack.js"></script> <script type="text/javascript"> $(function() { $('a.large').fancybox(); }); </script> <!--//ポップアップスライドショー--> </head> かなり困っています 是非お力添えの程よろしくお願い致します
- 締切済み
- JavaScript
- jQueryプラグイン、サーバー上だと動かない。
こんにちは。 このたび制作しているWEBサイトにjQueryプラグインのprettyphotoを実装したいのですが、ローカルの環境では問題なく動いてくれるのですが、サーバーにアップしたとたんにエラーがでてしまいまったく動いてくれません。 <head>内のスクリプトの記述は <script src="js/libs/modernizr-2.0.6.min.js"></script> <script src="js/prettyphoto/js/jquery-1.6.1.min.js"></script> <script src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'}); }); </script> という感じです。 ※そのほか直前にprettyphotoのCSSは読み込んでおります サーバーにアップしたページのソースをみてみるとCan't find variable:$というメッセージがでていたのでプラグインの記述を (function($){ // $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'}); }); }(jQuery)); // にしてみてもCan't find variable:jQueryというメッセージがでてきてしまいます。 こちらもともとテンプレートであったサイトを改変しているものなので、このほかHTML後半部分にもいろいろjavascriptの記述があります。以下となります。 <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.easing.compatibility.js"></script> <script type="text/javascript" src="js/jquery.validate.pack.js"></script> <script type="text/javascript" src="js/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript" src="js/jquery.tweet.js"></script> <!-- super fish js include --> <script type="text/javascript" src="js/superfish/js/superfish.js"></script> <script type="text/javascript" src="js/superfish/js/hoverIntent.js"></script> <script defer src="js/plugins.js"></script> <script defer src="js/script.js"></script> レイアウトが崩れないようひとつひとつとりはずしてみたのですがprettyphotoは動いてくれませんでした。 またパスが間違っていないかも何度もチェックはしたつもりです。 本当に困っているのですが、このような時どうやって原因を探していけばよいのか、何かアドバイスを いただけたらと思い投稿させていただきました。 当方、WEB制作初心者のため、見当はずれなことを訊いていましたらご容赦ください。 どうぞよろしくおねがいします。
- ベストアンサー
- HTML
- jQuery1.4.2、jQueryUI1.8.4、toggle()の
jQuery1.4.2、jQueryUI1.8.4、toggle()の状態を初期化 jQuery1.4.2、jQueryUI1.8.4にて、 toggle()を使用したあと、別のボタンなどで、そのtoggleの状態を初期化することは出来るのでしょうか。 <a id="button">ボタン</a> <div id="info"> <a id="close">閉じる</a> <p>あいうえお</p> </div> <script> $('#button').toggle( function(){$('#info').show('slide')}, function(){$('#info').hide('slide')} ); $('#close').click(function(){$('#info').hide('slide');}); </script> 「ボタン」を押して#infoを表示した後、「閉じる」を押して非表示にし、 もう一度「ボタン」を押すと、hide()が実行されてしまうため、このときにshow()が実行されるようにしたいのです。 フラグを使って.click()で切り替えれば作れますが、 せっかくtoggle()のようなメソッドがあるなら、それを利用できないかと思ったのですが。
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 なるほど。。$.load()では、ドキュメント・レディが使えないのですね。 何かそんな感じがしました。 読み込んだプラグインの展開より前に、それを使うJavascriptが走っているようです。 読込み元で先にプラグインを読んでおけばＯＫなのですが、特定のページでしかつかわないプラグインを全部のページで読むのに抵抗があります。 で、iframeなのですが、すでにデザインやアーキテクチャが決まってしまっていて、変更できません。 またこれ以外に、fancyboxで読み込むページもあります。 おっしゃる通り、読み込まれる側のJavascriptの起動をコールバックからにしてやってみます。 ありがとうございました。