非同期で読み込んだ外部jsで、jQueryのプラグインを読み込んでから処理を走らせる方法

前提・実現したいこと

HTMLファイルの<head>内に非同期で外部jsを読み込んでいます。←　top.jsとします。
また、同じHTMLファイルの</body>のすぐ上でも、外部jsを非同期で読み込んでいます。 ←　bottom.js

※直書きして読み込めばいいのですが、わけあって、このような仕様にしています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <script>
  const topJS = document.createElement('script');
  topJS.src = 'top.js';
  const script = document.getElementsByTagName('script')[0];
  script.parentNode.insertBefore(topJS, script);
  </script>
</head>

<body>

　---- 略 ---

  <script>
  const bottomJS = document.createElement('script');
  bottomJS.src = 'bottom.js';
  document.body.appendChild(bottomJS);
  </script>
</body>
</html>

やりたいこととしては、
top.jsでjqueryプラグインを読み込んで
bottom.jsでjqueryの処理を走らせたいと思っています。

試したこと

top.jsで https://code.jquery.com/jquery-3.3.1.min.js を非同期で読み込もうとしたところ、
bottom.jsで$が無いとエラーが出て、bottom.jsの処理が動きませんでした。

次にtop.jsで
document.write('https://code.jquery.com/jquery-3.3.1.min.js');　を使ったのですが、
非同期のjsで読み込んだjsの内部にdocument.write(); を使ってはいけないと怒られてしまいました。

bottom.jsにはwindow.onloadのタイミングで処理を走らせていないからいけないのだとは思うのですが
可能な限り速く、処理を走らせたいと思っています。

jqueryプラグインが読み込み終わったら、処理を走らせるという書き方はどうすればいいでしょうか？

（top.jsは空にして、bottom.jsに集約して書くのでも構いません）

お詳しい方、教えていただけますと幸いです。
どうぞ宜しくお願いたします。

行動規範の内容に同意します

回答1件

ベストアンサー

それぞれ、こうしてはいけないのでしょうか？

javascript
1document.querySelector("head").appendChild(topJS);
2document.querySelector("head").appendChild(bottomJS);

そもそも非同期で処理しているのでしょうか？

投稿2018/11/07 12:22

yambejp

総合スコア114769

gksh7

2018/11/07 15:00

ご回答ありがとうございます。おっしゃる通りですよね。そもそも勘違いをしていました。再度、組み方を見直します。取り急ぎ御礼申し上げます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！