onloadイベントで二つの操作を行う方法
- javascriptのonloadイベントを使用して、二つの操作を同時に行う方法を知りたいです。
- 別々に記述すると上手く動作しないため、一つのonloadイベントで二つの操作を行いたいです。
- 具体的には、ファイルの読み込みと画像のプリロードを同時に行いたいです。
- ベストアンサー
onloadイベントで二つの操作をやりたいのですがどうすればいいでしょうか？
javascriptでファイルを読み込んだらイベントを発生させる"onload"イベントでわからないことがあります。 ↓以下のように一つのonloadイベントで二つの操作をしたいのですがどうすればよいでしょうか？ 分けて記述してしまうと作動しません。 かといって <body onload="MM_preloadImages('/images/global/menu_00_ro.gif'),load_my_rss">とするわけにもいきません。 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ <script language="javascript"> function load_my_rss(){ get_rss("http://www.*******.jp/make_rss/rss1.rdf"); } window.onload = load_my_rss; </script> <body onload="MM_preloadImages('/images/global/menu_00_ro.gif')"> \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ どうすれば↓の二つの操作をほぼ同時に行えるでしょうか？ window.onload = load_my_rss; onload="MM_preloadImages どなたかよいアドバイスをお願いします。
- vber
- お礼率75% (21/28)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
セミコロンでつないでください。 ×<body onload="MM_preloadImages('/images/global/menu_00_ro.gif'),load_my_rss"> ○<body onload="MM_preloadImages('/images/global/menu_00_ro.gif');load_my_rss()"> もしくは、見やすくするために２つ以上をまとめてひとつの関数を作ります。 <body onload="onloadFunc()"> <script language=javascript> function onloadFunc(){ MM_preloadImages('/images/global/menu_00_ro.gif'); load_my_rss(); } </script> もしくは、bodyで指定せずに、windowのonloadにわりあてます。 <script language=javascript> window.onload=function(){ MM_preloadImages('/images/global/menu_00_ro.gif'); load_my_rss(); } </script>
関連するQ&A
- onloadイベント発火条件
window.onload <body onload="function(){}"> <img src="hoge.jpg" onload="function(){}"> <script src="hoge" onload="funct" でも <div>や<p>ではonloadイベントは無いですよね？ どういう場合にonloadイベントは発火するんでしょうか？ window , body ,その他ｓｒｃがあるdom でしょうか？ ブラウザ依存もあるでしょうが、仕様的なものはどうなってますでしょうか？
- ベストアンサー
- JavaScript
- <body onload=""> と window.onload
JavaScriptのonload処理についての質問です。 現在Java、JSP、JavaScript等でWebアプリケーションを作成しているのですが、 bodyタグ中のonloadに記載したファンクションが時々呼ばれないという問題が起きています。 （こんな感じで記述 <body onload="hoge();hogehoge();"> hogehoge()がたまに呼ばれないことがある・・・） これを回避する方法として、「onload処理をwindow.onloadに記述すれば良い」 という話を聞きました。 （こんな感じで記述 <script> window.onload = function(){ hoge();hogehoge(); } </script> ） 「bodyタグ中に記述するとたまに呼ばれないものが、window.onloadに記述すると確実に呼ばれる」 なんてことがあるのでしょうか？ 「２つめのファンクションが呼ばれない」という現象がたまにしか発生しないので、 window.onloadに記述する方法で確実に呼ばれるようになったという保証がとれません。 知識として知っている方がいれば是非教えていただきたいです。 よろしくお願い致します。 ※ブラウザはIEを使用 バージョンは IE → 6.0 JavaScript → 1.1 です。
- 締切済み
- JavaScript
- スクリプトエラーを修正できません。
スクリプトエラーがでて困っています。 オブジェクトを指定してください。 とのこと。 エラーのラインのタグは以下です。 どうしたらいいのか、どなたか教えてください。 <BODY bgcolor="#FFFFFF" onload="MM_preloadImages('images/side_otoiawase2.gif','images/side_kaisya2.gif','images/side_tokutei2.gif','images/bottan_seikaino2.gif');" <a name="top"><!--アクセス解析タグ ここから--><script language="JavaScript" src="http://analyzer2.fc2.com/analyzer.js?uid=777967"></script>
- ベストアンサー
- ホームページ作成ソフト
- window.onLoad について
<body> タグに、onload=関数名・・・ と記述するとなぜかオブジェクトがありませんとかで 実行されない時があるため、 <head>タグ内に <script type="text/javascript"> window.onLoad=function(){ 関数名} </script> と記述してみたところ、まったく関数が動作しなくなってしまいました。 ステータスには「ページが表示されました」とでていて、スクリプトエラーにもなっていないようです。 原因がわからず、それならば・・・ htmlを順番に表示していくのだから、htmlの最後のほうに記述すればいいのでは？ と思い、 </body>の直前に <script type="text/javascript"> 関数名 ← onloadで動作させる関数 </script> と記述してみたところ、うまく表示できました。 この記述方法って正しいのでしょうか？ 環境に依存するのか、毎回悩まされるし、毎回対処方法が違ったりしているので ホントに困っています。 アドバイスお願いします。 #何故 window.onLoad=function(){ 関数名 } ではまったく動かなかったのでしょう。。。
- 締切済み
- JavaScript
- 外部ファイルでBODYのonloadイベントの関数を指定するには？
（１）<BODY onload="funcA()">という形でなく、 ヘッダー内に入れた外部ファイルに （２）document.body.onload=funcA; としたいのですが、 「document.bodyはオブジェクトではありません」 というエラーになってしまいます。 <script language="javascript" src="xx.js">は <head></head>の中に入れています。 どうしたら（２）の方法で、 外部ファイルでbodyのonloadイベントの関数を指定できるでしょうか？
- 締切済み
- JavaScript
- プレロードイメージについて
こんにちは。プレロードイメージについて教えて下さい。 私は、ロールオーバーボタンのover部の画像を、下記のように外部スクリプトとして、bodyに読み込ませています。 <html> <head> <meta 中略 script-type"content="text/javascript"> <script 中略 javascript"src="./preload.js"></script> </head> <body onload="preloadImages()"> ..... </body></html> +----------------------------------- 外部スクリプトファイル名：preload.js 中身のソース： function preloadImages() { (new Image).src = './img/btn/menu_01-over.gif'; (new Image).src = './img/btn/menu_02-over.gif'; (new Image).src = './img/btn/menu_03-over.gif'; } こんな感じです。ですが、本当に、これで良いのかいつも気になっていました。それは、ヘッダ部でこれを呼び出しているので、bodyタグにonloadは要らないのか、 でも関数名「preloadImages()」にしているので、やはり要るのか、よく判らなくなって悩んでいます。 もし、間違っている場合、どうしたら良いのか教えて下さい。よろしくお願いします。
- 締切済み
- JavaScript
- 角丸うまくいきません
Javascript初心者です。 自分のサイトでRico.jsというライブラリを使って角丸ボックスを作ろうとしましたが、できませんでした。 で、検証していくと、どうやらbodyタグのonloadに原因があるようでした。 <body onload="MM_preloadImages('img/8hoverfloormop.gif','img～～> 実際にonload以下を外したら角丸が作れたのですが、どういうことでしょうか？ この記述はどこにすればよいのでしょうか？ ご回答よろしくお願いします。
- ベストアンサー
- JavaScript
- スクリプトの外部からの読み込み
Adobe GOLIVEでロールオーバーを作成すると以下のようなソースになるのですが、この中で外部ファイルとして読み込ませられる部分はないでしょうか？（特にヘッダ部）あるとすれば、どのように記述すればよいのでしょうか？ <HTML> <HEAD> <TITLE>Untitled Page</TITLE> <CSSCRIPTDICT import="import"> <SCRIPT type="text/javascript" src="GeneratedItems/CSScriptLib.js"></SCRIPT> </CSSCRIPTDICT> <CSACTIONDICT> <SCRIPT type="text/javascript"><!-- var preloadFlag = false; function preloadImages() { if (document.images) { pre_menu_o_02 = newImage('images/menu/menu_o_02.gif'); preloadFlag = true; } } // --></SCRIPT> </CSACTIONDICT> </HEAD> <BODY onload="preloadImages();"> <P><A onmouseover="changeImages('menu_01','images/menu/menu_o_02.gif');return true" onmouseout="changeImages('menu_01','images/menu/menu_01.gif');return true" href="index.html"><IMG id="menu_01" src="images/menu/menu_01.gif" alt="" name="menu_01" height="57" width="152" border="0"></A></P> </BODY> </HTML>
- ベストアンサー
- HTML
- メニュー（マウス通過・クリックで絵の替わる物）のことで質問です。
えーと、すいません。 メニューの件で質問です。 マウス通過・クリックで絵の替わるジャバスクリプトを作ってメニューを作ったんですけど、 その際にまだ読み込んでいないファイルを読み込むようにする物がDreamweaverにありましたのでそれも一緒に入れました。 でもなぜか、 Ｗｅｂ上に上げると、 メニューの絵が表示されますけれど、 マウス通過・クリックしますと次に出てくるはずの絵が出てこないのです。 （IEで見ると×マークが出てきます。） 作った物ですが、 こんなかんじです。 <body> <script language="JavaScript"> function winImage1(){ document.win1.src="×××.gif"; //これにさわったら、 } function winImage2(){ document.win2.src="×××.gif"; //これに替わる } //--> </script> <a href="index.htm" onMouseOut=winImage2() onMouseOver=winImage1() target="_parent"> <img border=0 name=××× src="×××.gif" alt="×××"></a> <body> を作りましたが、 なかなか見れません。 あと、Dreamweaver上にありました、先にこのファイルを読み込みなさいと指示をするジャバスクリプトものせておきます。 <head> <script language="JavaScript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } //--> </head> <body onLoad="MM_preloadImages(×××.gif,×××.gif・・・)"> </script> </body> です。 あと、使っているアプリケーションは、『Dreamweaver４』です。 どうかよろしくお願いします。
- ベストアンサー
- 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
お礼
すばやく丁寧な回答ありがとうございました。無事解決しました☆