ここから本文です

2つのjsファイルの読み込みの完了を待って、次のjsの処理がしたいと考えています。...

ya_********さん

2018/1/1311:50:53

2つのjsファイルの読み込みの完了を待って、次のjsの処理がしたいと考えています。
1つの場合はonloadイベントで行けたのですが、2つだとどう記述していいのか迷います。

JavaScriptでもjQueryでも良いので、2つのloadの完了を待って次の処理をする方法を教えていただけないでしょうか?

よろしくお願いいたします。

補足すみません。説明が不十分でした。以下のようなプログラムを書いています。

<script type="text/javascript">
function jsload(src, onload) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true; //非同期
script.charset ='utf-8';
script.onload = onload;
script.src = src;
document.getElementsByTagName('head')[0].appendChild(script);
consolo.log(src);
}

jsload('script1.js',(function(){console.log('1')}));
jsload('script2.js',(function(){console.log('2')}));
consolo.log('3'); // ← 両方の読み込みが終わってから実行したい
</script>

これを実行すると

script1.js
script2.js
3
1
2
と実行されます。

これを、
script1.js
script2.js
1
2
3

にするにはどうすればいいのだろうと悩んでいます。
逐次的に読み込みを待つしかないのか?setIntervalを使うのか?あるいはそれ以外?

閲覧数:
90
回答数:
2

違反報告

ベストアンサーに選ばれた回答

oishii_mahouさん

2018/1/1312:21:59

Javascript は、
基本的に記述された順序で読み込んで実行してい組んで、

━━━━━━━━━━━━━━━━
<script src="script1.js"></script>
<script src="script2.js"></script>
<script>
~ 次の Javascript コード~
</script>
━━━━━━━━━━━━━━━━

のように順番に記述するだけで、
「次の Javascript コード」が実行される時点で
2つの JS は読み込みが完了しているけど。。。

何がしたいのか。

ひょっとして、
2つの JS ファイルに、
ページ読み込み完了後に実行する処理を

━━━━━━━━━━━━━━━━
window.onload = function(){
~ 処理 ~
}
━━━━━━━━━━━━━━━━

のように書いているってことか?
それで、
2つの JS ファイルに記述された「ページ読み込み後」の処理を、
両方とも実行したい、そういうことだろうか?

「window.onload = function(){~}」で書くと、
最初に指定した「window.onload」は、
あとに指定した「window.onload」の内容で上書きされてしまうんで、
"load" イベントに関数を指定する場合は、
addEventListener() を使用して指定する。

━━━━━━━━━━━━━━━━
【 script1.js 】

window.addEventListener( "load", function(){
~ 処理 ~
}, false );


【 script2.js 】

window.addEventListener( "load", function(){
~ 処理 ~
}, false );


【 HTML 】

<script src="script1.js"></script>
<script src="script2.js"></script>
<script>
window.addEventListener( "load", function(){
~ 次の処理~
}, false );
</script>
━━━━━━━━━━━━━━━━


画像など読み込みも含める場合は "load" イベントでもいいけど、
単純にページの構成が読み込み終わった時点で実行するなら、
"DOMContentLoaded" の方がいい。

━━━━━━━━━━━━━━━━
【 script1.js 】

window.addEventListener( "DOMContentLoaded", function(){
~ 処理 ~
}, false );


【 script2.js 】

window.addEventListener( "DOMContentLoaded", function(){
~ 処理 ~
}, false );


【 HTML 】

<script src="script1.js"></script>
<script src="script2.js"></script>
<script>
window.addEventListener( "DOMContentLoaded", function(){
~ 次の処理~
}, false );
</script>
━━━━━━━━━━━━━━━━

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2018/1/13 13:36:20

si_kun117さん、oishii_mahouさんのどちらにもBAを差し上げたいのですが、今回は、setIntervalで処理することにしたので、oishii_mahouさんとさせてください。

お二方、ありがとうございました。

ベストアンサー以外の回答

1〜1件/1件中

si_********さん

2018/1/1312:30:47

window.addEventListener(`load` Callback)

これではダメ?

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる