- ベストアンサー
jQuery処理は、ページを読み込んでから行いたい
<script type="text/javascript"> $(function() { ここにAPI処理～ 上記例の場合、 API処理に時間がかかると、 ページ自体を開くのが遅くなってしまいます。 ページを読み込んでからでいいので、後から、 $(function() { ここにAPI処理～ を処理させるには、 どうすればよいでしょうか？
- re999
- お礼率61% (476/777)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- dscripty
- ベストアンサー率51% (166/325)
[ANo.1] さんの回答で解決できたとおもうけど、 <script> が <head> の中に入ってないと、どうしても気持ち悪いというなら こんなかんじで！ [ondisplay.htm](※以下 UTF-8 で保存) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <title>画面が表示されたあとに JavaScript コードを実行</title> <script type="text/javascript"> $(function () { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.setAttribute("charset", "utf-8"); script.setAttribute("src", "delay.js"); $("head").append(script); }); </script> </head> <body> <h1>画面が表示されたあとに JavaScript コードを実行</h1> </body> </html> [delay.js](※以下 UTF-8 で保存) alert('画面が表示されてから実行されるスクリプト');
- babu_baboo
- ベストアンサー率51% (268/525)
すくりぷとぶぶんを、</body>のちょくぜんにおいてみては？
関連するQ&A
- jQueryについて質問です。
jQueryについて質問です。 複数のプラグインを一つのページに組み込み同時に使いたいのですが、 それぞれが干渉しているのかどれか一つしか使えません。 http://solidstate.jp/Navigation/treeMenu/script_54.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html http://solidstate.jp/Navigation/houseOfCake/script_172.html こちらに紹介されている記事を参考に <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.navigmenu.js"></script> <script type="text/javascript"> $(function(){ $('#menu').navigmenu(); }); </script> <script type="text/javascript" src="accordian.pack.js"></script> <script type="text/javascript"> window.onload = function() { new Accordian('basic-accordian',5,'header_highlight'); } </script> <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.cookie.js" type="text/javascript"></script> <script src="jquery.treeview.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#filetree").treeview({//ターゲットとなる要素に付加するID animated: "fast", //アニメーション設定（削除するとアニメ無し） collapsed: true, //開閉設定（削除するとロード時にメニューを全開） unique: true, //動作設定（削除すると自動的に閉じなくなる） persist: "cookie", //Cookie }); }); </script> このような記述を行いました。 ですが、動くのはひとつだけです。 これらを同時に動かすにはどうすればよいでしょうか？ 優先順位は上からです。
- ベストアンサー
- JavaScript
- jQuery
http://bmath.org/wordpress/?p=663 上記を参考にＷＥＢページをつくってみたのですが、上手くいきません。 javascript部分をｈｔｍｌの <script type="text/javascript" src="js/site.js"></script>にいれたからでしょうか？ また、ｊｓフォルダは<script type="text/javascript" src="js/jquery.scrollTo-min.js">ではなく、jquery.scrollTo-1.4.3.1を使っています。 よきアドバイスお願いします。
- ベストアンサー
- CSS
- このjqueryが稀に動かない
画像が無いときに表示されるscriptですが稀に動かない時があります１０分の４位動かないです。どのようにすればよろしいでしょうか？ <script type="text/javascript" src="/kadenkoujiya1242/js/jquery.js"></script> <script type="text/javascript" src="/kadenkoujiya1242/js/noimg.js"></script> $(function () { $('img').error(function(){ $(this).attr({src:'/kadenkoujiya1242/img/noimg.png',alt:'画像が見つかりません'}); }); });
- 締切済み
- JavaScript
- Jqueryの干渉について
Jqueryの干渉について Jqueryのライブラリを使ったjsを2つ同時に組み込もうとしておりますが、 干渉してしまっているようで、どちらか一つずつしか使えない状況です。 使おうとしているものは、spacegalleryというものと、nivosliderという jsを使おうとしています。 それぞれ同じサイトの解説文を参照しながら、組み込んでみました。 参考にしたサイトは、 http://www.skuare.net/test/spacegallery.html http://www.skuare.net/test/jnivoslider.html で、headの記述は、 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/eye.js"></script> <script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript" src="js/spacegallery.js"></script> <script> $(document).ready(function(){ $('#myGallery').spacegallery({loadingClass: 'loading'}); }); </script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#hoge').nivoSlider({ effect:'random', // sliceDown、sliceDownLeft、sliceUp、sliceUpLeft、sliceUpDown、sliceUpDownLeft、fold、fade、random slices:15, //分割枚数 animSpeed:500, //アニメーションスピード pauseTime:3000, //停止時間 directionNav:true, //方向ナビ directionNavHide:true //隠す }); }); </script> 多分後からの記述の部分が前の記述をリセットさせてしまうと思うのですが、 上手くこの２つのスクリプトを同じページ内で稼働させる記述方法があれば 教えてください。 よろしくお願いします。
- 締切済み
- JavaScript
- JQUERY のEmpty()処理について
JQUERY のEmpty()処理について 次のコードで$('#board').empty(); 後に追加作成した要素はクリックに反応しないのですが、対応の方法をお教えください。 <html><head><title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="subf/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function (){ $('#board').append('<div id="card1" class="card"'); $('#card1').html("Card1"); $('#board').append('<div id="card2" class="card"'); $('#card2').html("Card2"); $('.card').click(function(){ alert($(this).attr("id")); }); }); function removeObj(){ $('#board').empty(); $('#board').append('<div id="card3" class="card"'); $('#card3').html("Card3"); } </script> </head> <body> <form><input type='button' onclick='removeObj()' value='Reset'></form> <div id="board" style="WIDTH: 10%; TOP: 100px; HEIGHT: 100px; BACKGROUND-COLOR: #ccff33"></div> </body></html>
- 締切済み
- JavaScript
- jqueryにて
こちらではお初にお世話になります。 よろしくおねがいします！ さて、jqueryを用いてScrollFollowを実装中なのですが、 正常に動作させることが出来ません。 ソースは <script type="text/javascript" src="./jslib/ui.core.js"></script> <script type="text/javascript" src="./jslib/jquery-1.2.6.js"></script> <script type="text/javascript" src="./jslib/jquery.scrollfollow.js"></script> <script type="text/javascript" src="./jslib/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./jslib/jquery.cookie.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('test').scrollFollow({ }); }); </script> をヘッド部分に、 <div id="test"> コンテンツ </div> をBODYに記述しています。 動作せずにFirefoxのエラーコンソールで確認したところ エラー: jQuery is not defined ソースファイル: （省略）update/jslib/ui.core.js 行: 238 エラー: $("test").scrollFollow is not a function ソースファイル: http://contest2009.thinkquest.jp/tqj2009/110392/update/ 行: 13 と表示されました。jsファイルの生存は確認できており、 その系統のミスではないと思うのですが。。。 どなたかアドバイスをお願いします！
- ベストアンサー
- JavaScript
- 一部のjQueryとmootoolsが競合します
dropdownメニューのdroppy(jquery)とmootoolsを使用したカレンダーが競合してしまいます。 mootoolsのカレンダーhttp://www.electricprism.com/aeron/calendar/ とメールフォームプロ http://www.synck.com/contents/download/cgi-perl/mailformpro.html のjqueryの組み合わせは問題ありませんでした。そこにdroppy http://onehackoranother.com/projects/jquery/droppy/ が入ると動かなくなります。 助けて頂ければ嬉しいです。よろしくお願いいたします。 jQuery.noConflict();やDollar Safe Modeなどもやってみましたが、うまくいきません。どこが間違っているのでしょうか？ <script type="text/javascript"> jQuery.noConflict(); jQuery(function(){ jQuery("#nav").droppy(); }); </script> ----------------------------- <script type="text/javascript"> $(function() { $("#nav").droppy(); }); (function($) { window.addEvent('domready', function() { myCal1 = new Calendar({ date1: 'Y/m/d' }, { direction: 1, tweak: {x: 6, y: 0} }); }); }(document.id)); </script> ---元はこちら↓-------------- <script type="text/javascript" src="commons/jquery.js"></script> <script type="text/javascript" src="js/jquery.droppy.js"></script> <script type="text/javascript"> $(function() { $("#nav").droppy(); }); </script> メールフォームプロ↓ <script type="text/javascript" src="commons/mfp.lang.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mfp.extensions.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mailform.js" charset="UTF-8"></script> <script type="text/javascript" src="postcodes/get.cgi?js" charset="UTF-8"></script> カレンダー↓ <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/calendar.rc4.js"></script> <script type="text/javascript"> //<![CDATA[ window.addEvent('domready', function() { myCal1 = new Calendar({ date1: 'Y/m/d' }, { direction: 1, tweak: {x: 6, y: 0} }); }); //]]> </script>
- ベストアンサー
- JavaScript
- JQuery のCSVについて
JQuery のCSVについて JQCSV というプラグインを検討していますが、動作が不安定なことが見出されました。状態・対応の方法をお教えください。（IE6.0) <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="subf/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="subf/jQCSV.js"></script> <script type="text/javascript"> var qRec; $(function (){ $.get("camData.csv",function(text){ qRec =$.csv()(text); }); alert("AAA"); alert(qRec[1][0]); $.get("refA.txt",function(text){ alert(text); $('#tell').html(text); }); }); </script> </head> <body> <div id="tell">aaa</div> </body></html> 上のコードで、alert("AAA") をコメント行とすると、alert(qRec[1][0]); 以下が動作しません。 これはどのような現象でしょうか。対応法はありますでしょうか。
- 締切済み
- JavaScript
- イベントハンドラに処理を追加するには？
例えばbodyタグのonloadイベントハンドラに JavaScriptを使って処理を追加するにはどうすればよいのでしょうか？ 例） ・rei.htm <html> <script language="JavaScript" type="text/javascript"> function hoge(){ alert("hogeです"); } function foo(){ alert("fooです"); } </script> <body onload="hoge();"> </body> <script language="JavaScript" type="text/javascript"> document.body.onload += foo(); </script> <html> ※前提条件として、変更可能な箇所はscriptタグ内のみとなります。 「こんなんでいけないかな？」と思って上記のようにやってみたのですがうまくいきませんでした。 （結果はfoo()のみ実行され、hoge()は実行されませんでした。 alertでbody.onloadの中身を確認すると『function anonymous{hoge();}undefined』と表示されるので、なぜfoo()が実行されてhoge()が実行されないのかよくわかりませんが‥） また試しに document.body.onload += foo(); これを以下のように変更してみました。 document.body.onload = foo(); この時は、 ・foo()の実行 ↓ ・javascriptエラー ↓ ・hoge()の実行 となりました。（これもなぜこうなるのかよくわかりせん） 以上、イベントハンドラに最初から任意に入れられている処理を残しつつ、 さらに処理を加えるにはどうすればよいのかご教示お願いします。
- ベストアンサー
- JavaScript
- prototype+jquery+プラグイン
prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。 クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが 順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。 何かいい方法はないでしょうか？ エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>
- 締切済み
- JavaScript
お礼
回答ありがとうございました。 リンク先、参考になりましたー